Nuxt & Strapi - Logging in with OAuth using Github - github

Question

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.

Answer 1

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