React SPA + APISIX + Google OAuth: Handling full-page redirect and token renewal

[yan-vine]

New to APISIX, thanks for reading and contributing, appreciate any help

I'm implementing a React SPA that needs Google OAuth authentication with APISIX as the API gateway. My current setup:

• React SPA running on localhost:3000
• APISIX gateway on localhost:9080
• Need Google OAuth with auto token renewal

I'm facing two specific challenges:

1. When a user clicks "Login" in my React SPA, I need to redirect to APISIX endpoint (/api/logged-user), which should then handle Google authentication. After successful auth, I need APISIX to redirect back to my React app with the user info (name, email, etc).
2. I need APISIX to handle token auto-renewal without my React app having to implement OAuth logic.

What's the recommended approach for this flow? I've tried configuring the OpenID Connect plugin with bearer_only: false, but I'm unclear on how to properly set up the redirect back to the React app and handle the user data transfer.
Has anyone implemented this pattern successfully? Any example configurations or best practices?
Thanks!

[dosubot[bot]]

Hey @yan-vine! 👋 I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this challenge together!

To address your challenges with implementing Google OAuth authentication and token auto-renewal using APISIX for your React SPA, you can follow these steps using the OpenID Connect plugin:

1. Configuration: Ensure that the OpenID Connect plugin is configured with the necessary parameters such as client_id, client_secret, and the discovery URL for Google's OpenID Connect configuration. Set bearer_only to false to allow the plugin to handle the full authentication flow.

2. Redirect Handling: Configure the redirect_uri in the OpenID Connect plugin to point back to your React SPA. This URI should be capable of handling the response from Google, which includes tokens and user information.

3. Authentication Flow: When a user clicks "Login" in your React SPA, redirect them to the APISIX endpoint (e.g., /api/logged-user). The OpenID Connect plugin will handle the authentication by redirecting the user to Google's authorization endpoint. After successful authentication, Google will redirect back to the redirect_uri you configured.

4. User Information Transfer: Enable the set_userinfo_header option in the plugin configuration. This will set the X-Userinfo header with the user information encoded in base64, which your React app can decode to access user details like name and email.

5. Token Auto-Renewal: Set renew_access_token_on_expiry to true in the plugin configuration. This ensures that the access token is automatically renewed when it expires, without requiring additional logic in your React app.

Here's a code snippet from the Lua script that demonstrates these functionalities:

if userinfo and conf.set_userinfo_header then
    core.request.set_header(ctx, "X-Userinfo",
        ngx_encode_base64(core.json.encode(userinfo)))
end

response, err, _, session = openidc.authenticate(conf, nil, unauth_action, conf.session)

if err then
    if session then
        session:close()
    end
    if err == "unauthorized request" then
        if conf.unauth_action == "pass" then
            return nil
        end
        return 401
    end
    core.log.error("OIDC authentication failed: ", err)
    return 500
end

if response then
    add_access_token_header(ctx, conf, response.access_token)

This setup will handle Google OAuth authentication, manage token renewal, and redirect back to your React SPA with user information after successful authentication ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[yan-vine]

@dosu tx for details
But

1. can't call protected api after redirect to react app from react app
   error with
   Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?client_id=969811115780-p6cae9299jv3jgtovoeh6f3kev1d5rb5.apps.googleusercontent.com&state=c5261638860ddf05e76fff67c0348449&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile%20email&response_type=code' (redirected from 'http://localhost:3000/api/logged-user') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. can't get X-Userinfo also when redirect back to redirect_uri

[dosubot[bot]]

To resolve the issues you're facing:

1. CORS Error: The error indicates that the CORS policy is blocking the request. You need to configure the CORS plugin in APISIX to allow requests from your React app's origin. Here's how you can enable CORS for your endpoint:

   curl http://127.0.0.1:9180/apisix/admin/routes/1 -H 'X-API-KEY: your-api-key' -X PUT -d '{
     "uri": "/api/logged-user",
     "plugins": {
       "cors": {
         "allow_origins": "http://localhost:3000",
         "allow_methods": "GET,POST",
         "allow_headers": "*",
         "expose_headers": "X-Userinfo",
         "max_age": 3600,
         "allow_credential": true
       }
     },
     "upstream": {
       "type": "roundrobin",
       "nodes": {
         "127.0.0.1:8080": 1
       }
     }
   }'

   This configuration allows requests from http://localhost:3000 and exposes the X-Userinfo header, which should resolve the CORS issue ^[1].

2. Missing X-Userinfo Header: Ensure that the set_userinfo_header option is set to true in your OpenID Connect plugin configuration. This will ensure that the X-Userinfo header is included in the response after authentication. Double-check your plugin configuration to confirm this setting:

   set_userinfo_header: true

   This setting will encode the user information in base64 and include it in the X-Userinfo header, which your React app can then decode to access the user details ^[2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[yan-vine]

This is exact issue reported #12025

[plamenlakov]

You also need to handle OIDC on the client-side (your SPA) using the appropriate library for example oidc-client-ts that should handle all of your issues with redirects, token renewal etc.