Strategy for implementing Auth0 in a React app with a Laravel backend

Hi :slight_smile:

I am working on wrapping my head around on the correct way to ask this question, so here it goes. I have a web application. I do not want to call it a SPA and I do not want to call it a “Web Application”. In simplified terminology, it has a React frontend and a Laravel backend.

I am interested in outsourcing auth to Auth0. From what I can tell there are two approaches to implementation and it is all about the callback URL and where it goes after successful auth with Auth0.

The first option is to have Auth0 redirect to a URL that is managed by the React app. In short, the React app captures an access token, attaches a JWT token to its Authorization header, and proceeds to make HTTP requests to the server using said token. It is then up to the server to verify that the signature on the JWT token is valid and signed by Auth0 and continue serving requests. In this particular case, I think I would have to write my own middleware for Laravel to protect routes by role/auth that is provided by the JWT tokens that are signed by Auth0, I think? I can use libraries Auth0 has created to verify the authenticity of the signature on the token. Overall, there’s less coupling between the backend and Auth0, but I am not sure how I feel about it. There is also the caveat that every single request will need to check if a user exists, based on their JWT token. If they do not, I would have to create a routine to create the user. This makes the server truly stateless, in a sense.

The second approach, I believe, would be the following: Authorization Code Flow. In this particular case, after a user authenticates with Auth0, the redirect URL would route directly to the Laravel backend, bypassing the React client. I would install the Auth0 provided packages for Laravel 6, which should be compatible with Laravel 7. The benefits here would be the routes, which can be API routes, will be cognizant of how to handle JWT tokens by leveraging middleware provided by Auth0. With that said, we would need a way to get the JWT back to the client, which would involve a lot more HTTP 302s, if I’m not mistaking, than the first flow. It would look something like this:

Client hits Login on the client → Universal Login Page on Auth0 is presented → Redirect to Laravel Server → Laravel server creates/logs in user → Laravel server attaches code via query string or HTTP Cookie and redirects to React client → React client has a dedicated route where the code is handled and added to some kind of state → React redirects to an authenticated page.

I suppose some questions to ask are:

Are the approaches mutually exclusive?
Is there a reason I should be using one over the other?
Can I use a little of both?
How are others solving this problem?
What approach would Auth0 engineers recommend in this case?

I would appreciate any feedback.

Thanks so much,

/sf

2 Likes

I am currently facing a similar dilemma, did you ever resolve this Steve? Does anyone have any ideas? Thanks!

Might want to use a pattern suggested by Auth0:
https://auth0.com/blog/backend-for-frontend-pattern-with-auth0-and-dotnet/

You can connect your backend through OpenID and manage the tokens at the backend. In this case, you might have to develop your own login/register/forgot-password pages, which Auth0 provides directly.

1 Like

Thanks for sharing that with the rest of community!