@eloqjs/nuxt-next-auth

@eloqjs/nuxt-next-auth

Quick Start

• Install the package:

# Using yarn
yarn add --dev @eloqjs/nuxt-next-auth

# Using npm
npm install --save-dev @eloqjs/nuxt-next-auth

• Add the package to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@eloqjs/nuxt-next-auth'],
})

• Create the authentication handler (NuxtAuthHandler) and add at least one authentication provider:

// file: nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    providers: ['github']
  }
})

// file: ~/server/api/auth/[...].ts
import { NuxtAuthHandler } from '#auth'
import GithubProvider from 'next-auth/providers/github'

export const authOptions = {
  secret: 'enter-your-secret-here',
  providers: [
    GithubProvider({ clientId: 'enter-your-client-id-here', clientSecret: 'enter-your-client-secret-here' })
  ]
}
export default NuxtAuthHandler(authOptions)

• [..].ts is a catch-all route, see the nuxt server docs

• Done! You can now use all user-related functionality, for example:

• application-side (e.g., from .vue files):

const { status, data } = useSession()

status.value // Session status: `unauthenticated`, `loading`, `authenticated`
data.value // Session data, e.g., expiration, user.email, ...

await signIn() // Sign-in the user
await signOut() // Sign-out the user

• server-side (e.g., from ~/server/api/session.get.ts):

import { getServerSession } from '#auth'
import { authOptions } from '~/server/api/auth/[...]'

export default eventHandler(async (event) => {
  const session = await getServerSession(event, authOptions)

  if (!session) {
    return { status: 'unauthenticated!' }
  }

  return { status: 'authenticated!', text: 'im protected by an in-endpoint check', session }
})

Development

• Run yarn dev:prepare to generate type stubs.
• Use yarn dev to start playground in development mode.

Why another package?

Although there are similarities with @sidebase/nuxt-auth, different system design choices have been made, and therefore their usage are also different.

The most important differences are the usage of useSession and how we fetch the session.

In @sidebase/nuxt-auth, each time useSession is used, it makes a request to the api to get the session, which means we have to await for the request and this makes our component asynchronous.

<script setup lang="ts">

const { data } = await useSession({ required: false })

</script>

In @eloqjs/nuxt-next-auth, the session is fetched on load the auth plugin, which means it's fetched before you page is loaded. So we don't need to await the useSession as there are no requests being made. You can use useSession anywhere you want, it's just accessing data stored with useState.

<script setup lang="ts">

const { data } = useSession()

</script>

Credits

Whoever contributes to this project! ❤️

This project was based and inspired by some amazing packages!

• NextAuth.js by NextAuth.js
• NextAuth.js Playground Nuxt by Robert Soriano
• @sidebase/nuxt-auth by Sidebase
• @nuxtjs/auth-module by Nuxt Community

📑 License

MIT License