Does auth0-vue support Nuxtjs3

[danyal14]

Hi
Our application is developed using Nuxtjs3 Typescript, and I'm about to implement Auth0, we are using SSR, and would like to know if I can configure auth0-vue for Nuxtjs3 SSR?

I'm following some recommendations

// plugins/auth0.client.ts
import { createAuth0 } from '@auth0/auth0-vue'

export default defineNuxtPlugin((nuxtApp) => {
 const config = useRuntimeConfig()

 const auth0 = createAuth0({
   domain: config.public.auth0Domain,
   clientId: config.public.auth0ClientId,
   authorizationParams: {
     redirect_uri: window.location.origin,
   },
 })

 nuxtApp.vueApp.use(auth0)
})

# nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      auth0Domain: process.env.AUTH0_DOMAIN,
      auth0ClientId: process.env.AUTH0_CLIENT_ID
    }
  }
})

Usage

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

let loginWithRedirect, logout, isAuthenticated, user

if (process.client) {
  const auth = useAuth0()
  if (auth) {
    ({ loginWithRedirect, logout, isAuthenticated, user } = auth)
  }
}
</script>

<template>
  <div v-if="process.client">
    <button v-if="isAuthenticated === false" @click="loginWithRedirect">Login</button>
    <button v-else @click="logout({ returnTo: window.location.origin })">Logout</button>
    <p v-if="user">Welcome, {{ user.name }}</p>
  </div>
</template>

There are few issues, loginWithRedirect is not working as it should, and I also see some hydration issues, if anyone has implemented this package in Nuxtjs guidance will be appreciated.

Best Regards
Danyal

[danyal14]

I'm using it now with Nuxtjs3, and have found the answer :)

[frederikprijck]

Thanks. We are working on a Nuxt 3 SDK to be able to handle authentication Server-Side in Nuxt. This should be expected in the following weeks.

For client-side authentication, Auth0-Vue does remain the solution, even for Nuxt.