I've been trying to implement OAuth2 for Google Sign-in with Vue and Deno, these are the relevant endpoints / domains
Back-end: localhost:8182
Front-end: localhost:8080
This is the flow of my setup: on the Vue front-end I fetch an authorization URI from the back-end, I've created this authorization URI with http://localhost:8080 as a redirect URI. Once the user signs in I get directed back to the Vue front-end with the authorization code in the URL.
Now I want to turn my authorization code into an access token, so using JavaScript I fetch the code from the URL and forward it to the back-end verification endpoint http://localhost:8182/oauth/validate, but it returns this error:
Invalid authorization response: Redirect path should match configured
path, but got: /oauth/validate
I figure that it errors out since I had the redirect URI set to http://localhost:8080 but I'm trying to get the token from /oauth/validate, I've also included my Google Cloud Console authorized URIs.
How can I fix this? In another post I saw someone using the same logic (sending the code from the front-end to the back-end and awaiting the result). But I must be doing something wrong
Have you tried removing /oauth/validate? I have a similar case in my local application. Here is how the "Authorized redirect URIs" section looks like:
Related
I have a Flash backend using flask-dance in order to allow a web app to authenticate users with Google provider.
In my local dev environment, the backend runs from https://localhost:5000, while my local frontend is at https://local.mydomain.com
I have a backend endpoint at https://localhost:5000/login/google which redirects the user to the Google OAuth flow:
#app.route('/login/<provider>')
def login(provider: str):
# here we store the page the user has come from with the referrer value
session["return_to"] = request.referrer
if provider == 'google':
return redirect(url_for("google.login"))
return False
If I access this URL directly in the browser, I'm redirected to Google and the OAuth flow completes successfully.
If, however, I add a button on the frontend that redirects to that URL, the OAuth flow fails midway and the browser prints the following errore:
Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=580945975384-0mqduo9k8dchc0ho7tnd7g6ejo70jrlb.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fauthorized&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&state=tWt5b2pkp0jfjxtXD8aHlMwsKyuCJw' (redirected from 'https://localhost:5000/login/google') from origin 'https://local.mydomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.js:1 Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:117)
xhr.js:210 GET https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=580945975384-0mqduo9k8dchc0ho7tnd7g6ejo70jrlb.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fauthorized&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&state=tWt5b2pkp0jfjxtXD8aHlMwsKyuCJw net::ERR_FAILED 200
This is the failed request:
The Flask backend app has CORS enabled.
Why is this happening?
I suspect that running the backend locally from a different domain has something to do with it, but I couldn't quite figure out exactly what is going on and how to fix this.
The Google OAuth URL you request (https://accounts.google.com/o/oauth2/auth) is the starting point for their authentication process - it requires a full browser - it needs to display a credentials form, consent and then to redirect the browser back to your application. That's why you cannot use XMLHttpRequest for accessing it.
Your backend CORS settings cannot help it - Google would have to enable it on their endpoint, but it still would not work for the reasons mentioned before.
Trying to set up an Authentication for my app, and all seemed to be working correctly, but when I tried testing it out I got this error message
Authorization Error
Error 400: redirect_uri_mismatch
The redirect URI in the request, http://localhost:3000/api/auth/callback/google, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/${your_client_id}?project=${your_project_number}
Can you point me in the right direction to fixing this?
Error 400: redirect_uri_mismatch
Is a configuration issue. The redirect uri is used to return the authorization code to your application after the user has consented to your applications access to your data. You have created a web client credentials up on Google developer console.
What you need to do is go back there and add a Redirect uri of
http://localhost:3000/api/auth/callback/google
It must match exactly don't add any spaces at the end or anything.
If you have any issues i have a video which will show you exactly how to add it Google OAuth2: How the fix redirect_uri_mismatch error. Part 2 server sided web applications.
Seems like there's a mismatch with the Authorized redirect URIs. Are you sure you have entered the correct URIs? Redirect URI should be the URL that you'll be redirecting the user to after the login page or the base URL of your application Eg: https://localhost:8000
Also, make sure that you are using the correct Client ID and Client secret
Similar Questions
Google OAuth 2 authorization - Error: redirect_uri_mismatch
Correct redirect URI for Google API and OAuth 2.0
First attempt at using the Imgur API for OAuth2 authentication. I have a Client ID and Client Secret from https://api.imgur.com/oauth2/addclient. The URL that is being called from my Vue application looks like:
https://api.imgur.com/oath2/authorize?client_id={CLIENT_ID}&response_type=token&state=test
...where {CLIENT_ID} is the Client ID obtained from the client registration. This doesn't work from my web app and also fails in Postman. I'm getting back a 404 which displays the page that reads, "Zoinks! You've taken a wrong turn."
Any advice is appreciated.
I had the same problem. For me the solution was to open my Vue application from the network address https://192.168.2.100:8080 instead of the local adress https://localhost:8080
Vue console picture
Imgur apparently doesn't accept requests from localhost. Consequently I also had to set the OAuth2 redirect url of my application registered in imgur to http://192.168.2.100:8080/...
I need the following information for my app to work:
1) Client ID
2) Redirect URL
Setting up the app and creating an ID + secret code was easy. But I have no idea what to put as my redirect URL. I used localhost as my URL and I was able to sign into my google account but after I signed in I received Error: redirect_uri_mismatch
Screenshot
What can I do? How do I even create a redirect URL?
In the Developer Console credentials page (the one in your screenshot), add your redirect URI to the "Authorized redirect URIs" text field.
Ensure you're supplying the correct port and correct route your server is listening on too.
For example, in the Google API Console, the working redirect URI for me is
Your port and route all depend on your server setup (ie. look in your index.js if you're using Node). This working sample with port 5000 is from the example server code in the YouTube API NPM module readme.
I was wondering why we need to specify the redirect uri both in our code and in google developer console when using Oauth2.I was following this tutorial http://www.tothenew.com/blog/grails-way-of-oauth-2-0-to-access-google-apis-part-1/.
The client may register multiple redirect_uri's with the Authorization Server (i.e. Google) and sending the redirect_uri in the request itself is to let the Authorization Sever know on which one of the registered redirect_uri's the client wants to receive the authorization response.
The redirect_uri parameter is optional by spec: if there's only one registered, then the redirect_uri parameter may be omitted from the request.
The only redirect URI which really matters is the one which you enter into your Google Developer Console. This redirect URI is what Google will use to reconnect with your web application after it has either approved or rejected your authorization attempt.
The reason you are also specifying this redirect URL in your code is to ensure that your application can correctly recognize the incoming redirect request.