The right way to use oidc-client in a SPA with backend app

[mulej2]

Thanks for the great lib!

This is not actually an issue but I'm trying to figure out the correct way to implement the authentication flow in my React app which uses a backend app to fetch data from secured data sources. The app is registered to Azure AD and it uses oidc-client to run the authorization code flow.

Currently my app is running the following steps to authenticate users:

1. The frontend app redirects user to the Microsoft login page and requires user to log in. 2. After login, the user is redirected back to the frontend app with an authorization code and code verifier (PKCE) 3. The frontend app sends the received auth code and code verifier to the backend app's /token endpoint which exchanges the given auth code to an access token and a refresh token by calling Azure's /token endpoint with auth code and client secret. 4. The backend app responds with tokens and then the frontend app stores the received tokens to LocalStorage

Is this a correct way to do this or is there any safer approaches? E.g. register app as SPA in Azure and just use Azure's /token endpoint directly?

My worry is that because the token endpoint of the backend app have to be open to whole world, somebody might somehow use it to crack the authentication.

[brockallen]

I'd suggest driving the protocol from the server-side app, then just using cookies from the SPA to your backend APIs.

https://leastprivilege.com/2019/01/18/an-alternative-way-to-secure-spas-with-asp-net-core-openid-connect-oauth-2-0-and-proxykit/

[mulej2]

Ok, so does this means that I don't need to use oidc-client on the frontend-side at all?

[brockallen]

Ok, so does this means that I don't need to use oidc-client on the frontend-side at all?

Correct.