Google OAuth 2 authorization - Error: redirect_uri_mismatch
stackoverflow.com/questions/11485271/google-oauth-2-authorization-error-redirect-uri-mismatch
1 Users
0 Comments
2 Highlights
0 Notes
Top Highlights
mstance applying to this configuration. Tech Stack Backend Python 3.6 Django 1.11 Django REST Framework 3.9: server as API, not rendering template, not doing much elsewhere. Django REST Framework JWT 1.11 Django REST Social Auth < 2.1 Frontend React: 16.8.3, create-react-app version 2.1.5 react-google-login: 5.0.2 The "Code" Flow (Specifically for Google OAuth2) Summary: React --> request social auth "code" --> request jwt token to acquire "login" status in terms of your own backend server/database. Frontend (React) uses a "Google sign in button" with responseType="code" to get an authorization code. (it's not token, not access token!) The google sign in button is from react-google-login mentioned above. Click on the button will bring up a popup window for user to select account. After user select one and the window closes, you'll get the code from the button's callback function. Frontend send this to backend server's JWT endpoint. POST request, with { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" } For my Django server I use Django REST Framework JWT + Django REST Social Auth. Django receives the code from frontend, verify it with Google's service (done for you). Once verified, it'll send the JWT (the token) back to frontend. Frontend can now harvest the token and store it somewhere. All of REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGIN and REST_SOCIAL_OAUTH_REDIRECT_URI in Django's settings.py are unnecessary. (They are constants used by Django REST Social Auth) In short, you don't have to setup anything related to redirect url in Django. The "redirect_uri": "postmessage" in React frontend suffice. This makes sense because the social auth work you have to do on your side is all Ajax-style POST request in frontend, not submitting any form whatsoever, so actually no redirection occur by default. That's why the redirect url becomes useless if you're using the code + JWT flow, and the server-side redirect url setting is not taking any effect. The Django REST Social Auth handles account creation. This means it'll check the google account email/last first name, and see if it match any account in database. If not, it'll create one for you, using the exact email & first last name. But, the username will be something like youremailprefix717e248c5b924d60 if your email is youremailprefix@example.com. It appends some random string to make a unique username. This is the default behavior, I believe you can customize it and feel free to dig into their documentation. The frontend stores that token and when it has to perform CRUD to the backend server, especially create/delete/update, if you attach the token in your Authorization header and send request to backend, Django backend will now recognize that as a login, i.e. authenticated user. Of course, if your token expire, you have to refresh it by making another request. Oh my goodness, I've spent more than 6 hours and finally got this right! I believe this is the 1st time I saw this postmessage thing. Anyone working on a Django + DRF + JWT + Social Auth + React combination will definitely crash into this. I can't believe none of the article out there mentions this except answers here. But I really hope this post can save you tons of time if you're using the Django + React stack. Share Follow answered Mar 6, 2019 at 3:46 Shawn 7651212 silver badges1515 bronze badges Add a comment 10 In my case, my credential Application type is "Other". So I can't find Authorized redirect URIs in the credentials page. It seems appears in Application type:"Web application". But you can click the Download JSON button to get the client_secret.json file. Open the json file, and you can find the parameter like this: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. I choose to use http://localhost and it works fine for me. Share Follow answered Mar 12, 2016 at 5:31 codezjx 8,92255 gold badges4646 silver badges5757 bronze badges Add a comment 9 When you register your app at https://code.google.com/apis/console and make a Client ID, you get a chance to specify one or more redirect URIs. The value of the redirect_uri parameter on your auth URI has to match one of them exactly. Share Follow edited Sep 10, 2015 at 6:17 answered Aug 21, 2013 at 13:57 Kathir 1,2031515 silver badges2424 bronze badges And it is with very field that has problems for deep Angular based links as google doesn't agree [landed1.github.io/videos.html#/oauth2callback]is a valid URL – landed Jan 23, 2014 at 15:41 Add a comment 9 Checklist: http or https? & or &? trailing slash(/) or open ? (CMD/CTRL)+F, search for the exact match in the credential page. If not found then search for the missing one. Wait until google refreshes it. May happen in each half an hour if you are changing frequently or it may stay in the pool. For my case it was almost half an hour to take effect. Share Follow edited Oct 29, 2020 at 14:17 answered Feb 16, 2016 at 9:07 itsazzad 6,69777 gold badges7171 silver badges8686 bronze badges Add a comment 7 for me it was because in the 'Authorized redirect URIs' list I've incorrectly put https://developers.google.com/oauthplayground/ instead of https://developers.google.com/oauthplayground (without / at the end). Share Follow answered Nov 13, 2018 at 20:29 Jacek Góraj 91511 gold badge1010 silver badges1616 bronze badges 1 Thank you! I couldn't find what was wrong – Eloi Mar 22, 2022 at 11:32 Add a comment 6 The redirect url is case sensitive. In my case I added both: http://localhost:5023/AuthCallback/IndexAsync http://localhost:5023/authcallback/indexasync Share
this fixed the problem:
Ready to highlight and find good content?
Glasp is a social web highlighter that people can highlight and organize quotes and thoughts from the web, and access other like-minded people’s learning.