Authentication

Uno Auth use nuxt @sidebase/auth module.

NuxtAuth is an open source Nuxt module that provides authentication for Nuxt 3 applications. It supports multiple authentication methods, allowing you to customize the ways users login to your application.

Through a direct integration into Nuxt, you can access and utlize the user sessions within your pages, components and composables directly.

Configuration

By default uno is configured to use local provider, it's best when you already have a backend that accepts username + password as login or want to build a static application. You can find the configuration at @core/auth/nuxt.config.ts.

Register

See an example of a registration page at @core/auth/page/register.vue.

Login

When crafting your custom sign-in page you can use signIn to directly start a provider-flow. For example, when a user clicks a button on your custom sign-in page. Here is a very simple sign-in page that either directly starts a GitHub-OAuth sign-in flow or directly signs the user in via the credentials flow:

<script setup lang="ts">
// Remember to disable the middleware protection from your page!
definePageMeta({
    auth: { unauthenticatedOnly: true, navigateAuthenticatedTo: '/'}
})

const { signIn } = useAuth()

/*
 * NOTE: Here we hard-coded username and password
 * On your own page this should probably be connected to two inputs
 */
const demoCredentials = { username: 'test', password: 'hunter2' }
</script>

<template>
  <div>
    <p>Sign-In Options:</p>
    <button @click="signIn('github')">
        Github
    </button>
    <button @click="signIn('credentials', demoCredentials)">
        Username and Password
    </button>
  </div>
</template>

Logout

Sign a user out of the application. Optionally pass a callbackUrl to redirect a user to afterwards.

<script setup lang="ts">
const { signOut } = useAuth()
</script>

<template>
    <button @click="() => signOut"> 
        Signout
    </button>
    <button @click="() => signOut({ callbackUrl: '/signout' })"> 
        Signout with redirect
    </button>
    <button @click="() => signOut({ callbackUrl: 'https://nuxt.org', external: true })"> 
        Signout with external redirect 
    </button>
</template>

Forgot Password

See an example of a forgot-password page at @core/auth/page/forgot-password.vue.