Auth-module: Authentication does not occur after callback from auth0 provider on statically generated nuxt site

[DjustinK]

Version

v4.8.4

Reproduction link

https://github.com/nuxt-community/auth-module

Steps to reproduce

Setup nuxt with typescript.
Install auth module @nuxtjs/auth @nuxtjs/axios @types/nuxtjs__auth
Configure auth0 provider https://auth.nuxtjs.org/providers/auth0.html
Setup login and callback routes.
Generate static.
Run http-server ./ in the dist folder.
Open browser and login (localhost:3000)

What is expected ?

The user should be authenticated after auth0 redirects to the callback.

What is actually happening?

Auth0 redirects to /callback, but the user is not authenticated.

Additional comments?

Running the application normally (without static) works.
Setting mode to universal or spa has no effect.

_{This bug report is available on Nuxt community (#c447)}

[DjustinK]

login.vue

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  name: 'Login'
})
export default class Login extends Vue {
  public mounted(){
    this.$auth.loginWith('auth0')
  }
}
</script>

callback.vue

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  name: 'Callback'
})
export default class Login extends Vue {}
</script>

nuxt.config.ts

  modules: [
    '@nuxtjs/auth',
    '@nuxtjs/axios',
  ],
  router: {
    middleware: 'auth'
  },
  auth: {
    strategies: {
      auth0: {
        domain: ', // Fill
        client_id: '', //Fill
      }
    },
    redirect: {
      login: '/login',
      logout: '/logout',
      callback: '/callback',
      home: '/'
    }
  }

[bjesus]

@DjustinK, did you manage to find a way around this? I'm seeing the exact same issue :cry:

Update: Managed to fix this by downgrading to 4.7.0

[groydis]

Having same issue :(

[DjustinK]

I figured it out, auth0 always appends a forward slash at the end of the callback url.
So basically you need to set '/callback/' in your application and in the auth0 callback url settings.
I also set my application in spa mode.
Tested with the latest nuxt/vue versions.

[marvinknoll]

I figured it out, auth0 always appends a forward slash at the end of the callback url.
So basically you need to set '/callback/' in your application and in the auth0 callback url settings.
I also set my application in spa mode.
Tested with the latest nuxt/vue versions.

@DjustinK did it also work in "universal" mode? In my case adding "/" at the end of the callback url only fixes it in "spa" mode. Is there a reason for it?

[amirakbulut]

I figured it out, auth0 always appends a forward slash at the end of the callback url.
So basically you need to set '/callback/' in your application and in the auth0 callback url settings.
I also set my application in spa mode.
Tested with the latest nuxt/vue versions.

@DjustinK did it also work in "universal" mode? In my case adding "/" at the end of the callback url only fixes it in "spa" mode. Is there a reason for it?

Have you fixed this already? I get redirected to my callback page but still see that I'm not authenticated. I have to manually refresh the page for it to show me that I'm authenticated. Using SSR univarsal mode.

[marvinknoll]

@amirakbulut no unfortunately it is still not working

[Bernix01]

I suggest adding the onRedirect and onError listeners for better debugging.

[mellson]

I got it to work by wrapping the login buttons in client only inspired by this comment