Auth0 SDK for Nuxt 3

[awacode21]

Feature: Please provide an auth0 SDK for Nuxt 3

Description: / Use-case:
My customers application should use Nuxt 3 with Server Side Rendering.
The customers authentication provider is Auth0.
We are currently migrating to Nuxt3, but are experiencing Auth0 to block this task 100%.

Unfortunatly Auth0 still does not provide any SDK for Nuxt. It provides one for Next.js. So i would like to ask if their shouldn’t also be one for Nuxt, as Nuxt meanwhile is widely used in the vue community.

I need to support server side rendering with auth0. So already on the server i need to know if the user is logged in or not and have access to the token for server side api calls. I need to know this information on both, client and server.
Also i need to be able to use custom login/register page.
But there is no SDK, no documentation, no example. Simply nothing that helps us getting Auth0 running with Nuxt 3.

In past with Nuxt 2 there was a nuxt module to handle authentication but it is not compatible with nuxt 3. For nuxt 3 there is non official module yet, which make it even worse that Auth0 is providing nothing to use their service with nuxt.

There is one community package (from sidebase) one can use, but it is only working client side, seem to not provide custom login/register pages and end up in weird issues because of some internal conflicts with nuxt. Its also only a wrapper arount next.js to get it somehow working for nuxt. This is far away from ideal and no solution with our requirements.

So currently the missing support of Auth0 for Nuxt is blocking our Migration to Nuxt. Everything else would work totally fine. This is really annoying and a big problem for us.

So i would like to left my request here for an Auth0 SDK for nuxt, or any guidance on how to implement it with Nuxt with SSR and custom login/register.

Any help appreciated.

[konrad.sopala]

Hey there!

Thanks @awacode21 for raising that! I can already see that it got two votes which is good, basically the more votes it will receive the more likely our engineering team will implement that. We review those feedback cards on a monthly basis and will let you know once we have any updates on that front!

[awacode21]

@konrad.sopala As this still is a really big issue for us (btw a very big company using your service) i would like to ask if you got already enough votes to work on this or if it is still in state “don’t know if we ever will work on it”?

[konrad.sopala]

Hey there @awacode21 !

Just reached out to our SDK team regarding that. Once I receive the answer will make sure to relay the information here.

[konrad.sopala]

In the meantime that we wait for their answer it seems that https://sidebase.io/nuxt-auth which, according to some github issues seems to work with Auth0 on Nuxt3 [nitro] [dev] [uncaughtException] TypeError: Auth0Provider is not a function · Issue #271 · sidebase/nuxt-auth · GitHub

[konrad.sopala]

Just received a response from the SDK Team Product Manager.

Nuxt is something that we’ve been keeping tabs on. We don’t have any immediate plans unfortunately but its something that we will be looking at deeper most likely in Q3 when we explore more framework expansions with our existing SDKs.

[awacode21]

@konrad.sopala
Regarding the sidebase plugin:
Sadly this plugin seems to be broken somehow for auth0. We tried for long time to get it running but we needed to stop our whole nuxt migration because of the lack of Auth0 support. The sidebase plugin is not delivering the whole user objects data which should be delivered, it also only delivers somekind of invalid/broken token. We are unable to work with it. The needs of my customer where not able to solve with that plugin. So we really need the official SDK to be safe with our user authentication.

Quite sad that lack of auth0 support hinders us in going with this amazing framework.
We thought about finding a solution on our own writing something with openid connect. But the whole topic and documentation was so unclear and confusing that we postponed the whole thing.

[colton]

Bummer that this isn’t on your immediate to-do list. Was considering use Auth0 for my OAuth and OpenID Connect needs, but i may need to go else where.

[prodoxx]

I also need this. If Auth0 isn’t going to make this anytime soon or see it as a priority, I’ll try to do a community version of it.

There is a SDK for NextJs but non of Nuxt3?

[ctrl-Felix]

Q3 is over soon. Are there any news on tihs?

[biketag]

EDIT:
It looks like the Nuxt team is recommending other solutions, and has not yet finished their internal module for authentication:

[Important] Auth Module State

With that, there is no straightforward authentication strategy for Auth0 and Nuxt. There is an @auth0/auth0-vue package. I am wondering how much work it would be to implement a Nuxt module for this? @konrad.sopala

[konrad.sopala]

Hey there!

Following up on that with our SDKs team. Will share an update as soon as I have more context from them. Thank you!

[odm]

@konrad.sopala Any news regarding official SDK for Nuxt3?

[ah_nova]

Are there any updates? Have the devs started working on this?

[timotheeduran]

@konrad.sopala Hello! Any updates on this?

[Wazbat]

It’s a shame there’s no updates on this. Though I think at this point there’s other mature providers

[rzouhair]

Hello! I haven’t tested this solution thoroughly, but this is the approach I took to set it up in my nuxt app

in plugins/auth0.ts I added auth0 to the vue app:

import { createAuth0 } from "@auth0/auth0-vue";

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

  const auth0 = createAuth0({
    domain: runtimeConfig.public.auth0url,
    clientId: runtimeConfig.public.auth0client,
    ...otherOptions,
  });

  if (process.client)
    nuxtApp.vueApp.use(auth0)
})

then added the auth guard to a route middleware as follows:

import { createAuthGuard } from "@auth0/auth0-vue";

export default defineNuxtRouteMiddleware(async(to, from) => {
  if (!isAuthenticated()) {
    return await createAuthGuard()(to); 
  }
})

in my users’ pinia store, I added useAuth0 composable and exported states I needed:

import { defineStore } from "pinia";
import { useAuth0 } from "@auth0/auth0-vue";

export const useUserStore = defineStore('user', () => {
  const {
    isAuthenticated,
    logout: authLogout,
    loginWithRedirect,
    error,
    user: userProfile,
  } = useAuth0();
  const userId = computed(() => userProfile.value?.sub);

  async function logout() {
    await authLogout({
      logoutParams: { returnTo: window?.location.origin }
    });
  }

  return {
    isAuthenticated,
    userProfile,
    userId,
    error,

    logout,
    login: async () => {
      await loginWithRedirect()
    },
  };
});

I used the users’ store across the app, and navigation guard seems to be working based on the authentication state.

I hope this helps!

[k4ben]

a) Where is isAuthenticated defined in the middleware?
b) Seems to work if I reference the useUserStore() with ssr disabled, but not sure how to access the vue plugin from nuxt ssr (is this even possible)?

“Cannot destructure property ‘isAuthenticated’ of ‘vite_ssr_import_2.useAuth0(…)’ as it is undefined.”

[tyf]

Hey all! Just a quick update here to share that an official Nuxt SDK is on the roadmap - While I’m unable to share an exact date at this time, the team plans to look at releasing a beta version of the SDK beginning in Q3 2024+.

Stay tuned!