5

I am creating an application with a React front-end and a Java Spring Boot back-end.

My login flow looks like this:

  1. A user clicks on login on the front end
  2. User is redirected to the Google Oauth authorization endpoint on my server
  3. OAuth 2.0 Authorization flow happens: User is redirected to Google and logs in. Google interacts with my server first exchanging an authorization code and then a JWT access token. My server now has the JWT access token for the user.
  4. ISSUE: I now need to redirect the JWT token to my React front-end so that the token can be saved and used every time the user wants to request access to a protected resource on my server.

Is there now an industry standard/best practice for redirecting the token to my React front-end from the server?

There are similar questions on this subject on Stack Overflow, however they are at least 3 years old, e.g. How to provide frontend with JSON web token after server authentication? Since then the implicit flow has been deprecated, storing JWTs in local storage is no longer recommended, and https://datatracker.ietf.org/doc/html/rfc6750 explicitly discourages passing bearer tokens to the front end in a redirect URL.

I was wondering if anyone knows of an up to date solution for this problem.

Django
  • 343
  • 1
  • 4
  • 23
  • With the Authorization flow, a `code` is sent back to your frontend application using a redirection to your callback endpoint. You just have to consume that code using the token endpoint (POST request). The [RFC6749, section 4.1](https://datatracker.ietf.org/doc/html/rfc6749#section-4.1) clearly explains the pocess. – Spomky-Labs Jul 19 '21 at 23:14
  • Hi, thanks for your comment, but what you are suggesting seems to be to splinter my authorization code flow between my server and my front end. This is not what I'd like to do. I'd prefer to go through the entire authorization flow on my back-end server as Spring boot does all the work in terms of validation, caching the token and creating an authorised user. My question is more, how can I go about passing that JWT token from my server to my front-end after the authorization flow between Google and my server has been completed and I already have a JWT access token. – Django Jul 20 '21 at 09:45
  • industry standard/best practice is to not mix client side auth and server sided auth. – Linda Lawton - DaImTo Jul 26 '21 at 16:43
  • @DaImTo, thanks for your reply, all of my authentication is happening on the server, I just need some way to pass the fully authenticated user JWT from my server to my React front end. The entire OAuth 2.0 Authorization flow takes place on my backend server. – Django Jul 27 '21 at 10:02
  • 1
    Then all your use of the JWT should be on the backend as well. – Linda Lawton - DaImTo Jul 27 '21 at 13:52
  • @DaImTo, I see. Sending the JWT to my front end is so that it can be sent back on every user request. This would mean I can identify the user making the request and check whether they have permissions to access any protected resources. If I keep the JWT on the back-end, how can I achieve this, how can I identify the user making a request from my front end and check if they have permissions? Maybe some sort of cookie that is mapped to the JWT on my backend? – Django Jul 28 '21 at 16:25

2 Answers2

2

There's a draft IETF BCP for OAuth 2.0 for Browser-Based Apps - see here. Basically, it's very similar to native mobile apps using authorization code with PKCE (proof key for code exchange).

FWIW I agree implicit flow shouldn't be used, but IMO you shouldn't be using authorization code flow without PKCE, as this flow is for server side rendered web apps.

EDIT - Auth0 (one of the most popular CIAM solutions on the market) docs say the same thing - see here.

If the Client is a Single-Page App (SPA), an application running in a browser using a scripting language like JavaScript, there are two grant options: the Authorization Code Flow with Proof Key for Code Exchange (PKCE) and the Implicit Flow with Form Post. For most cases, we recommend using the Authorization Code Flow with PKCE...

Ryan.Bartsch
  • 3,698
  • 1
  • 26
  • 52
  • Hi, thanks for your reply, that ietf looks useful and I'll probably use section 6.2 to implement something for my application. – Django Jul 31 '21 at 12:44
0

Don't.

You seem to mix 2 issues here.

First, you would like to use OIDC for authentication in your SPA. For this you would use OIDC Implicit Flow or Authorization Code Flow with PKCE.

Second, you would like to delegate authentication to google instead of doing it yourself. Basically this is known as federation - you trust external Identity Provider.

The full-blown version would be to setup your own Identity-Provider server (like e.g. keycloak) and configure federation to google there. Your SPA would initiate OIDC against your Identity Provider and wouldn't even know that google did the authentication. You could also easily add further Identity Providers (e.g. facebook) if necessary.

An easier workaround would be to initiate OIDC login from your SPA directly to Google. This way your SPA would receive token directly from google and you would need to protect your own backend as a resource-server accepting and validating those tokens. Adding further Identity-Providers like facebook would be a challenge.

Vilmantas Baranauskas
  • 6,596
  • 3
  • 38
  • 50