sidebase/nuxt-auth 0.3.0-alpha.1

on GitHub

To use the new version:

npm i -D @sidebase/nuxt-auth@0.3.0-alpha.1

A big thanks to @JoaoPedroAS51 who gave the inspiration + code examples and reviewed the code for this ❤️

What's Changed

This release is a bigger one and contains some breaking things, which is why we go from 0.2 to 0.3. This release:

• feat: delegates auth- and session-lifecycle management to a plugin
• feat!: makes useSession sync based on this change: no more await in your setup code
• feat: adds lastRefreshedAt to the session properties to allow you to act based on this time
• feat!: adds a auth middleware, use it:
  • globally via the nuxt.config.ts: https://github.com/sidebase/nuxt-auth#global-middleware
  • locally via definePageMeta: https://github.com/sidebase/nuxt-auth#local-middleware
• feat!: getCsrfToken returns the token string directly, instead of an object that contains the token
• refactors the internal structure a big

Breaking changes

1. feat!: makes useSession sync

useSession is now synchronous. The initial session is fetched via a plugin that is loaded on app-startup. In your app replace:

// 1. old way to get data and status without forcing auth
const { data, status } = await useSession({ required: false })

// 2. old way to force auth
await useSession()

with:

// 1. new way to get data and status without forcing auth
const { data, status } = useSession()

// 2. new way to force auth: there's 2
// - recommended: use middlewares, read on in breaking change number (2) below or in docs https://github.com/sidebase/nuxt-auth#middleware
// - possible to support old-style manual checks:
const { getSession } = useSession()
await getSession()

and you're good to go. Note that useSession will also not directly force a login anymore. This is instead done via the new authentication middleware, see the related change below at number (2).

1. feat!: adds a auth middleware

This is a new approach to page protection that works either globally for the whole app or locally for certain pages. Check out the docs on this here: https://github.com/sidebase/nuxt-auth#middleware

If you want to keep using the 0.2.x approach of writing protection middlewares yourself, you can do this as follows:

const { getSession } = useSession()

// This will trigger a redirect if not logged in, just as `await useSession()` used to do. Also supports same additional options like `callbackUrl`
await getSession({ required: true })  

1. feat!: getCsrfToken returns the token string directly, instead of an object that contains the token

The return of getCsrfToken changed:

// old
console.log(await getCsrfToken())
// outputs: { token: 'asdfjklasdhjklasdhjlasdjlasdjkljklasd' }


// new
console.log(await getCsrfToken())
// outputs: 'asdfjklasdhjklasdhjlasdjlasdjkljklasd'

Commits

• Make use session sync, use a plugin based approach for session fetching by @BracketJohn in #69
• release: 0.3.0-alpha.1 by @BracketJohn in #73

Full Changelog: 0.2.1...0.3.0-alpha.1

First Time Contributor

As above, can not be stated enough: A big thanks to @JoaoPedroAS51 who gave the inspiration + code examples and reviewed the code for this ❤️