Nuxt 3 @sidebase/nuxt-auth module - local provider does not persist auth status after login

Question

I have created nuxt 3 app with @sidebase/[email protected] for authentication. It was able to connect to backend api(.NET) /login and /user-info sucessfully but when redirect after login, still redirect back to /login page.

I tried to prevent redirect after login using await signIn({user_name: 'test', password: 'user'}, { redirect: false }); and when I logged useAuth(), status is "authenticated" and token has value.

auth configuration in nuxt.config.ts

auth: {
        globalAppMiddleware: true,
        baseURL: process.env.API_BASE_URL,
        provider: {
            type: 'local',
            pages: { login: '/login' },
            endpoints: {
                signIn: { path: '/login', method: 'post' },
                signOut: false,
                getSession: { path: '/user-profile', method: 'get' }
            }
        }
    }

Answer 1

I new in @sidebase/nuxt-auth. It's look like your auth module doesn’t save your auth data in composable state, so you have redirected back to the /login page, because you set globalAppMiddleware: true in your config file.

I'm also using @sidebase/[email protected] with [email protected] and [email protected] but for me auth state successfully set after calling /login and /user endpoints.

nuxt.config.ts

    auth: {
        globalAppMiddleware: true,
        baseURL: `${process.env.API_BASE_URL}/api/auth`,
        provider: {
            type: 'local',
            endpoints: {
              signIn: { path: '/login', method: 'post' },
              signOut: false,
              signUp: { path: '/registration', method: 'post' },
              getSession: { path: '/user', method: 'get' }
          },
          pages: {
            login: '/login',    // page where unauthorized user will be redirect if it will try to access protected page
          },
          token: {
            maxAgeInSeconds: 60 * 60 * 24,    // token expiration 1d
            signInResponseTokenPointer: '/token',
          },
          sessionDataType: {    // user session data format
            id: 'string',
            email: 'string',
            firstName: 'string',
            lastName: 'string',
            role: 'string',
          },
        },
        session: {
          enableRefreshPeriodically: 1000 * 60 * 60,   // Refetch user session data every 1h
          enableRefreshOnWindowFocus: true,     // Refetch user session every time when browser tab will be focused
        }
      }

login.vue

const { signIn } = useAuth()

...

await signIn({
    email: email.value,
    password: password.value
  }, {
    callbackUrl: '/',
    external: false,
  })