Search code examples
githuboauthstrapinuxt.jsnuxt-auth

Nuxt & Strapi - Logging in with OAuth using Github

I am setting up a community website with a Strapi CMS backend and a NuxtJS frontend using the composition API.

Besides the normal registration and login using email and username (which works!), I want users to be able to login using GitHub.

I am using @nuxtjs/auth module for authorization.

I've "deployed" my Strapi backend using ngrok. This is needed apparently to make OAuth work.

I've set up my GitHub application, using <ngrok-url>/connect/github/callback as the callback.

I've set the GitHub client_id and secret in my .env file.

In the strategies in my nuxt.config.js file I have this:

github: {
  clientId: process.env.GITHUB_CLIENT_ID,
  clientSecret: process.env.GITHUB_CLIENT_SECRET,
},

I've added a line in config/server.js of the Strapi backend:

url: '<ngrok url>'

So the backend is fired up in that location.

In my Strapi configuration, I've enabled a GitHub provider, and I need a redirect url to my frontend there. I am not sure what to put here.

I've tried: http://localhost:3000 (my Nuxt app port), but then I get a redirect uri mismatch error ("the redirect uri must match the registered callback"), when I try to access it from the frontend (using nuxt-auth's loginWith('github)').

More info on this here, but I don't get what they are saying.

  • Provide a redirect_uri where?
  • And they say to have a redirect_uri that matches what you registered. That matches what exactly?

The nuxt-auth docs are not that elaborate, saying to use $auth.loginWith('github') and that's it. I do this in my frontend, but I'm not sure if that is all I should do.

I can go manually to "<ngrok-url>/connect/github" (in ingognito) and login there in GitHub and I get redirected to the url I put in Strapi, with the access token as a parameter. So that part seems to work.

My main 2 question are:

  • How do I make the correct call from the frontend to the right endpoint to login through GitHub?
  • How do I process the result of that call?

Any help is much appreciated!

Update #1

I added a property redirectUrl on the github strategy in nuxt.config.js with the <ngrok-url>/connect/github/callback. That fixes a redirecting issue from GitHub.

I also added a redirect in Strapi to localhost:3000/connect/github and added a page in nuxt following this solution.

Now, I get back a jwt token and a user from Strapi, but $auth.loggedIn is still false in my front end. I'll try to fix this by writing my own middleware. I think this is needed because the app is server-side rendered.

Solution

  • The issue was that loginWith('github') connects nuxt directly to github. But we want to go to Strapi first. So in the end, I removed all the github-related info in my frontend and made a regular <a> with href to <strapi-url>/connect/github and then handled the response in a vue page like so:

    data() {
    return {
      provider: this.$route.params.provider,
      access_token: this.$route.query.access_token,
    }
  },
  async mounted() {
    const res = await this.$axios.$get(
      `/auth/github/callback?access_token=${this.access_token}`,
    )
    const { jwt, user } = res
    await this.$auth.setUserToken(jwt)
    this.$auth.setUser(user)
    this.$router.push(`/`)
  },

    To test it locally, I used ngrok to fire up the backend in a tunnel, instead of localhost.

    If you want to look at more code, check out my PR here