marmelab / ra-example-oauth

An example of OpenID Connect implementation on React Admin

ra-example-oauth

This example shows how to support OAuth in a react-admin v4 application.

Requirements

1. A google application: ret up a project in the Google API Console to obtain OAuth 2.0 credentials, set a redirect URI, and (optionally) customize the branding information that your users see on the user-consent screen
2. Configure OAuth for this application with http://localhost:5173/auth-callback as the authorized origin and http://localhost:5173/auth-callback as the authorized redirect URI. Copy the client ID and secret.
3. Rename the .env.template files in both the app and api directory and update the following variables:
   • VITE_OIDC_CLIENT_ID: Paste the client ID you copied at step 2
   • OIDC_CLIENT_ID: Paste the client ID you copied at step 2
   • OIDC_CLIENT_SECRET: Paste the secret you copied at step 2

Installation

Run the following command:

make install

Development

1. Start the API by running:

   make run-api

2. In another terminal, start the application by running:

   make run-app

ra-example-oauth's Issues

Change example to use PKCE authorization code flow

@Kmaschta @exabugs

So I noticed that the server call is mandatory in this example because it is using OIDC secrets directly to look up the token. However, it is actually possible to do frontend-only authentication with OIDC (in fact, the library that you’re using - oidc-client - actually handles ALL of the bespoke authorization code flow logic that you’ve implemented in your authProvider); however, there is literally zero example of such flow being implemented with react-admin, and react-admin really does NOT play well with the redirects of the OIDC code flow.

Therefore it would be INSANELY nice if you could drop the unnecessary server call and implement a proper OIDC code flow with react-admin’s authProvider. Thank you.

Provide example with react-admin v3 using the authorization code flow and PKCE

Could you please provide an example with react-admin v3 using the authorization code flow and PKCE?

Thank you.

Add a descriptive README