fix(oauth2): restore callback handling on static sites

[jakul]

Fixes #299.
Fixes #452.

This fix works for my static Nuxt site, logging into Auth0.

[codecov]

Codecov Report

Merging #453 into dev will not change coverage.
The diff coverage is n/a.

@@         Coverage Diff         @@
##            dev   #453   +/-   ##
===================================
  Coverage   100%   100%           
===================================
  Files         1      1           
  Lines         2      2           
===================================
  Hits          2      2

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ea08d39...12b136d. Read the comment docs.

[pi0]

Thanks for the PR!

[marconi1992]

@pi0 Do you know when a new version with be published with this fix?

[pi0]

I is already published :)

[MathiasCiarlo]

@pi0 @jakul does the handleCallback always render server side first? Or are there instances where it only happens client side (ie. no real callback)?

If we are certain it always happens ssr, I propose we only handle callbacks server side:

    // Fetching token with authorization code should only be done server side
    if (process.client) {
      // Redirect to home
      this.$auth.redirect('home', true)
      return true
    }

This way we can keep @atinux's change which drastically improves the performance.

[pi0]

does the handleCallback always render server side first?

Not in SPA mode.

[MathiasCiarlo]

Good point! Okay, can we know which mode we are running? I want to do this:

if (universalMode && process.client) {

[bjesus]

@jakul do you maybe have some example repo? I'm still seeing this issue with a static site using auth0. When running yarn dev everything works fine, but when using generate --spa and then serving it - I can't login.

Update: Managed to fix this by downgrading to 4.7.0

[Strahinja]

@bjesus This isn't working for my setup (universal/static) even with 4.7.0. yarn dev works (more or less) fine, but uploaded dist from yarn generate just hangs on callback page.

@manniL mentioned this working on his website, but the current version of his website doesn't seem to be using auth.

[bjesus]

@Strahinja Are you using Auth0? My config looks like this and it's working, statically generated and served from Netlify:

  auth: {
    redirect: {
      callback: "/login",
      logout: false,
      home: "/home",
      login: false
    },
    rewriteRedirects: false,
    strategies: {
      auth0: {
        domain: "auth.mydomain.com",
        client_id: my_client_id,
        audience: "https://mydomain.auth0.com/api/v2/"
      }
    }
  },

/login is a page on my system that redirects to /home with a simple _this.$router.push("/home");

[Strahinja]

Nope, I'm not using Auth0. My website repo is at https://github.com/Strahinja/strahinja-org. This is the relevant part of my nuxt.config.js:

import authConfig from './auth.config.js';
// ...
auth: {
        cookie: {
            options: {
                expires: 7, // days
            },
        },
        localStorage: false,
        plugins: [ { src: '~/plugins/auth.js', mode: 'client' } ],
        strategies: {
            local: false,
            google: {
                client_id: authConfig.google.client_id,
            },
            facebook: {
                client_id: authConfig.facebook.client_id,
            },
            github: {
                client_id: authConfig.github.client_id,
                client_secret: authConfig.github.client_secret,
            },
            twitter: {
                client_id: authConfig.twitter.client_id,
            },
        },
        redirect: {
            login: '/login',
            logout: '/',
            callback: '/login/callback',
        }
    },

/login/callback is just a page showing a spinner, much like the /callback from the auth-module demo. I also include middleware: ['auth'] on my '/login' page. I didn't add any explicit redirection to /login/callback, but it still works with yarn dev, auth-module picks up parameters from query/hash and then redirects further. My plugins/auth.js checks if user is logged in, calls getToken() and fetchUserOnce(), and finally updates the login log in my database.

I feel that Nuxt statically generating /login/callback might be an issue. I'll try to test that when I have time and report here.

[Strahinja]

I tried setting

    generate: {
        //...
        exclude: [
            /login/,
        ],
    },

but unfortunately nothing changes, auth-module still doesn't pick up parameters from the query/hash.

[Strahinja]

I just tried adding

middleware: ['auth'],

to /login/callback in my project and now Google login works, but Facebook login and Github login (with code flow) still don't.