Nuxt NextAuth
Experimental authentication module for Nuxt using NextAuth.
Demo: https://nuxt-next-auth-demo.vercel.app/
Usage
Requirements
- Nuxt SSR
- Vuex store
- Composition API - automatically installed
Setup
- Install the dependency:
yarn add nuxt-next-auth
- Add to your
nuxt.config.js
and configurenext-auth
options:
import Providers from 'next-auth/providers';
export default {
buildModules: ['@nuxtjs/composition-api/module'],
modules: [
'nuxt-next-auth/module'
],
nextAuth: {
// Configure one or more authentication providers here.
// https://next-auth.js.org/configuration/providers
providers: [
Providers.GitHub({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET
})
],
// A database is optional, but required to persist accounts in a database.
// https://next-auth.js.org/configuration/databases
database: process.env.DATABASE_URL,
}
}
Use in your application
- All methods from the NextAuth.js client library can be imported in the
nuxt-next-auth
module or accessed via global$nextAuth
plugin:
// Options API
export default {
mounted () {
this.$nextAuth.getSession()
this.$nextAuth.getCsrfToken()
this.$nextAuth.getProviders()
this.$nextAuth.signIn()
this.$nextAuth.signOut()
}
}
// Composition API
import { useSession } from 'nuxt-next-auth' // can import other methods too
const [session, loading] = useSession()
- To persist the session in the Vuex store, add this to your actions in
store/index.js
:
export const actions = {
async nuxtServerInit({ dispatch }, { req }) {
await dispatch('auth/getSession', { req })
}
}
// nuxt-next-auth uses auth as module name
export default {
mounted () {
const { session } = this.$store.state.auth
}
}
- Create a middleware for auth routes:
// middleware/auth.js
export default ({ store, redirect }) => {
if (!store.state.auth.session) {
return redirect('/')
}
}
// any-secure-page.vue
export default {
middleware: ['auth']
}
Configuration
Using with TypeScript
Add nuxt-next-auth
to the compilerOptions.types
section of your project's tsconfig.json
file:
{
"compilerOptions": {
"types": [
"nuxt-next-auth",
]
},
}
Example code
<template>
<div>
<div v-if="session">
Signed in as {{ session.user.email }} <br />
<button @click="signOut">Sign out</button>
</div>
<div v-else>
Not signed in <br/>
<button @click="signIn">Sign in</button>
</div>
</div>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
import { signIn, signOut, useSession } from 'nuxt-next-auth'
export default defineComponent({
setup() {
const [session, loading] = useSession()
return {
session,
loading,
signIn,
signOut
}
}
})
</script>
Develop
git clone https://github.com/wobsoriano/nuxt-next-auth.git
cd nuxt-next-auth
yarn
yarn test
Running locally
To run the fixture Nuxt app (/test/fixture
) locally, make sure to:
cp test/fixture/.env.example test/fixture/.env
and populate with your real values. Then, run:
yarn dev
To boot the app locally.
Credits
- NextAuth.js - Authentication for Next.js
- Auth Module - Zero-boilerplate authentication support for Nuxt.js
- nuxt-oauth - Simple OAuth2 integration for your Nuxt app