OAuth2 Mismatching redirect URI

I’m using Erpnext oauth2 for my react application.

I configurated Oauth2 on my erpnext with Redirect URIs and Default Redirect URI is “https://localhost:3000/oauth2/callback

Scopes: all openid

Grant Type: Authorization Code

Response Type: Code

But when I request to:

https://xxxx.com/api/method/frappe.integrations.oauth2.authorize?client_id=45b6a82ab7&state=444&response_type=code&scope=openid all&redirect_uri=https://localhost:3000/oauth2/callback

After login a received message: {“description”:“Mismatching redirect URI.”,“status_code”:400,“error”:“invalid_request”}

How to i fix that issue?

try to encodeURIComponent() everything that is passed as param values.

https://xxxx.com/api/method/frappe.integrations.oauth2.authorize?client_id=45b6a82ab7&state=444&response_type=code&scope=openid all&redirect_uri=https://localhost:3000/oauth2/callback

this will become


Thanks you, it’s working.

And one else question.

If i used Simple Authentication via /api/method/login for custom login page in my react application.

How to i get bearer token after login? Or setting cookies samesite to none?

Because, after login i can’t get cookie sid for next request. The samesite cookies setting to lax.

My erpnext in azure cloud
My react frontend in my localhost for development mode

Thanks for your support. @revant_one

If you are going to use Bearer Token from browser app then you will need to allow_cors in site_config.json of your ERPNext site. By using bearer token you don’t get any cookie. You can query the userinfo endpoint (/api/method/frappe.integrations.oauth2.openid_profile) with access token in Authorization header and get details about the user.

If you are going to use it with cookies you need to serve your react app along with ERPNext site on the same domain. Either use nginx to reverse proxy additional route or Add Single Page Application to website portal page

1 Like

How to i can get bearer token without oauth2?

OAuth 2 covers modern app authorization / revocation scenarios. Get the bearer token using the prescribed oauth2 flows.

Hack up anything! Add frappe whitelisted endpoints that in the end returns a new bearer token frappe.new_doc("OAuth Bearer Token") something like this Trying to implement OTP login

1 Like