auth-module demo doesn't work with Github, Facebook login gives error, token not displayed for Auth0 and Google

[Strahinja]

Version

v4.8.4

Reproduction link

https://github.com/nuxt-community/auth-module/tree/dev/examples/demo

Steps to reproduce

• After cloning the main nuxt-community/auth-module repo, run yarn, yarn dev

• Open browser at http://localhost:3000

• Logging in with Auth0 and Google works, but the "secure" page is missing info on token:
  

• Pressing the "Login with Facebook" button gives
  

• Pressing the "Login with Github" button gives Github's 404 page.
  

What is expected ?

All providers should work consistently, user should at least be able to login.

What is actually happening?

Some providers (Github and Facebook) don't work, others don't display information about the token.

Additional comments?

I ran into this bug when trying to learn the recommended setup for auth-module through the included demo.

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

[kartikbhargav11]

+1

[jeremy21212121]

For any of the real providers to work, you will likely need to create an OAuth app with that provider and put the relevant information into your nuxt.config.js file. Here is a link to how to do it for GitHub.

If you look at that examples nuxt.config.js file, there is a provider called oauth2mock. I'd imagine that one will work, just based off its name it is probably a mock provider for demo purposes.

If you look at the github entry in that same file, you will see that it is looking for GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET for a .env file, which you would have to create yourself.

TL;DR - In order to use real OAuth2 providers like google, github, twitter, etc, you need to create on OAuth2 app on their platform in order to generate a client secret. It is also restricted by domain.

[Strahinja]

That should be mentioned in a prominent place then. I know it is not relevant to this particular issue, but what led me to it was the fact that the only provider out of Google, Facebook, Twitter and Github I was able to get working in my own statically generated Nuxt website was Google. Others either don't redirect properly, or in the case of Facebook, work with yarn dev and not with yarn generate. Even with Google, when using the default master branch, after the token expires the user is again being redirected to Google to relog, in other words there is no refresh support in the default branch.

[jeremy21212121]

I agree 1000% there should be a readme for that demo. I've been thinking about writing one but I have a bit of a backlog of stuff to do. That being said, this is the nature of open source. There is no warranty, and it can be really helpful to learn how the underlying tech works.

I believe the other issue you are running into is that this module does not always work with nuxt generate. Some providers require running middleware on the server in order to function. Check out issue #299 for more info. I think some folks might have gotten it working with SPA mode instead of universal.

Back in September 2019, pi0, the co-author of nuxt, posted this comment in a nuxt issue:

Using nuxt generate in universal mode is not appreciate for any dynamic content including authentication because server response is prerendered. Auth works fine in the standard universal mode using nuxt start so it would better idea using a hosting (either VPS or serverless) and running the nuxt server or using SPA mode.

Long story short, SSR is a better option for easy auth, especially if you don't want to have to get into the weeds. Some folks have made it work for some providers in static site generation mode, but it is not guaranteed to work.

This is another thing that should be documented somewhere.

Disclaimer: I have no affiliation with this project, I'm just a user and nuxt fanboy.

[Strahinja]

Well, SSR with universal mode to boost SEO using meta tags is a major reason why use Nuxt in the first place, so SPA is out of the question. I was just hoping that social login would work with hydration or in pages excluded from static generation, but it seems it doesn't. Since I need social login to authenticate API usage with JWT, in my specific case I think I will be better off doing that on the backend and writing my own authentication controller.

[eramosr16]

@Strahinja I got the same issue you had, redirection doesn't work for static site generation.

[eramosr16]

Hey, I'm experiencing this very same issue with static site generation:

 ssr: false,
 target: 'static',

 "nuxt": "^2.14.6",
 "@nuxt/content": "^1.9.0",
 "@nuxtjs/auth-next": "^5.0.0-1610115973.9fdaa66",

I tried the trailing slash and didn't work either.

[bmulholland]

The discussion on this issue is about a different topic than the original post. I'm going to close this one out for now - please file a new, separate issue for static site redirection.