Cannot get any authentication provider to work: redirect_uri_mismatch

[alexdevmotion]

Describe the bug
I followed the documentation, I tried using the react-login-front-end-app, no matter how hard I try, I always run into the same redirect_uri_mismatch error.

Steps to reproduce the behavior

1. Select any provider in your strapi admin panel, let's go with GitHub, since it seems to be the simplest and also has a video tutorial from Strapi (tried following it step by step).
2. Fill in the required fields as described in the docs; also follow the other steps described in the docs
3. Go to http://localhost:1337/connect/github or click on the Github button inside the React login frontend boilerplate app

Expected behavior
Successful authentication

Screenshots
See in Additional context

System

• Node.js version: 12.16.1
• NPM version: 6.14.5
• Strapi version: 3.0.1
• Database: Postgres 12.3
• Operating system: Windows 10 Pro x64

Additional context
Seems to be a problem with how strapi is sending the redirect_uri to the Oauth providers. Shouldn't it be something like https://760bbe10e952.ngrok.io/connect/github/callback ?

I also noticed that, as opposed to the tutorial video, redirect URL field in the provider config doesn't get automatically populated, could it be a frontend issue?

If I try any other provider (tried facebook & google as well), I also get an URL related error.

[anis-marrouchi]

Hello @alexdevmotion, we have experienced a similar issue. In our case we did overwrite the extensions/users-permissions/controllers/Auth.js.
The issue happened after we've migrated to version 3.0.1.

To fix this issue we've updated the Auth.js with the updated version found under
node_modules/strapi-plugin-users-permissions/controllers/Auth.js.
Specifically these 2 lines (260-261)

grantConfig[provider].callback = _.get(ctx, 'query.callback') || grantConfig[provider].callback;
grantConfig[provider].redirect_uri =`${strapi.config.server.url}/connect/${provider}/callback`;

Hope this will resolve the problem for you and anyone else who is facing a similar issue.

[alexdevmotion]

@anis-marrouchi I don't have a extensions/users_permissions/controllers/Auth.js - it's using the one from node_modules which looks exactly like you have it there.

But from your code snippet, I deduce that ${strapi.config.server.url} is empty in my case. I'll have a look where this is set.

By the way, it wasn't related to the version, I had the same issue w/ 3.0.0.

Thanks!

Later edit
Yup, it seems like my strapi.config.server looks like this:

{
  host: '0.0.0.0',
  port: 1337,
  cron: { enabled: false },
  admin: { autoOpen: false },
  url: ''
}

I'll investigate further.

Laterer edit
The docs say that the url, if not serving via proxy, should basically be the prefix for the API, so it's fine to be empty.

Can someone help shed some light on this issue?

[alexdevmotion]

Okay, so, if anyone is also having this issue, here is some progress I made on it:

If I manually change line 261 in node_modules/strapi-plugin-users-permissions/controllers/Auth.js from

grantConfig[provider].redirect_uri = `${strapi.config.server.url}/connect/${provider}/callback`;

to

grantConfig[provider].redirect_uri = `https://baae71593e94.ngrok.io/connect/facebook`;

which is the ngrok URL to the react login example app, running on port 3000 on my machine.
And also setting the same redirect URL in the Github / Facebook Oauth config.

Then, I'm able to successfully reach the Oauth authentication screen for both Github and Facebook, after clicking the corresponding buttons in the react login app.
Then, they successfully respond with the code, which reaches my frontend, which in term makes a call to http://localhost:1337/connect/{github or facebook}/callback?code={whatever code}.

All seems fine until now, but the backend responds with an error. For facebook this error is:

And for github, this error is:

Maybe this helps in narrowing down the cause of the bug. Could there have been changes made to Grant or how the Oauth providers work lately?

Thanks in advance!

[Kabil-Boutou]

Hi @alexdevmotion, there is a better solution than changing the node modules file.
You can just add the url in config > server.js ( if you don't have the folder just creat if with server.js file ) and in the file add this : module.exports = ({ env }) => ({ url: "http://localhost:1337", });
It should work just fine.

[alexdevmotion]

@Kabil-Boutou I would clearly not go with the approach of modifying a file inside node_modules, I was just using it as a means to convey the problem I'm facing and how I made progress in solving it.

Setting the url to http://localhost:1337 was one of the first things I tried, but to no avail.

Thanks!

[akhilmhdh]

@alexdevmotion did you find a fix. I am also stuck at this issue. After migrating my oauth is not working. Added url but the problem is after authentication redirection i am not getting JSON instead getting query parameters of id_token etc. The user is not saved at all.

[alexdevmotion]

Nope I have not, I'm still waiting from feedback from other contributors. However, it seems that the problem you are encountering @akhilmhdh is different.

[petersg83]

Hi!
I think the doc should be updated to be clearer.
Yes url in config/server.js is required to use the connect feature, and have to be absolute like "https://mywebsite.com".
Otherwise we don't know how to construct this url.
Let me know if that works for you!

You can set

{
  host: '0.0.0.0',
  port: 1337,
  cron: { enabled: false },
  admin: { autoOpen: false },
  url: 'https://760bbe10e952.ngrok.io'
}

[alt-ctrl-dev]

I found that setting 'url' changes the url strapi admin should also point to. This could be an issue if the callback url points to a url that is not strapi

e.g. if you set url as

 {
  host: '0.0.0.0',
  port: 1337,
  cron: { enabled: false },
  admin: { autoOpen: false },
  url: 'https://760bbe10e952.ngrok.io'
}

then strapi thinks that https://760bbe10e952.ngrok.io/admin point to http://localhost:1337/admin