Using a single auth0 application for both a reactjs SPA and an ASP.NET Core MVC application

Help
,
1

Hi,

We have two applications that make up the front end of our product. One is an old ASP.NET Core MVC application and the other is a new React SPA application, users will generally login to the old MCV application first and be redirected to the react application for specific actions (we are trying to move fully to react but its a slow process :joy:).

In auth0 we have a single application setup for this product/application as it was only the MVC application that used auth0 properly, the react application currently has a custom setup for authentication. (Specifically we take the JWT from the MVC application and pass it across to react as a query param when we send users over)

I have been working on some updates to our react app in preparation for moving more of the MVC application over and I wanted to change the custom authentication to use auth0ā€™s react provider. I followed this guide to get it setup and its all working as expected for the most part. The only issue faced is when the user is redirected to the /callback route it fails to redirect as the app tries to make a call to /oauth/token for the token exchange, but this call fails.

I have worked out that the reason for the failed call is that the auth0 application has been set to a ā€œRegular web applicationā€ rather than a ā€œSPA applicationā€. From what I understand a ā€œSPA applicationā€ will use Authorization Code Flow with PKCE where as a ā€œRegular web applicationā€ will use just regular Authorization Code Flow. Is there anyway for me to tell the react app to use the PKCE flow whilst still using the single same auth0 application set to a regular web application type?

2

Found the fix for this, changing the ā€œAuthentication Methodsā€ to ā€œNoneā€ under the application credentials settings has got both apps working as expected!

Screenshot for reference:

image
image1573Ɨ1435 127 KB

3

Hi @ben.davidson it is correct that for the SPA apps this setting needs to be ā€œNoneā€. For regular Web Applications though it should be better set to the other secure options as ā€œNoneā€ allows creating a token for your ASP.NET app without using the client-secret of your application.

Ideal setup is to create a separate SPA app which will set the type to none for your React Application and then you may keep your current application for the ASP.NET app unchanged.

Having two apps on Auth0 wouldnā€™t increase your usage stats or force the users to login again. With seamless SSO turned on, when a user logs in to one app, the other app login will happen without a re-login.

4

Ah, I didnā€™t realize login sessions persisted across auth0 applications!

I will give that a go tomorrow and report back, thanks!

1 Like