Help Center/ Relational Database Service_RDS for PostgreSQL/ Best Practices/ AI Application Development Platform/ Enabling GitHub Third-Party Authentication and Login for RDS Supabase AI Applications
Updated on 2026-10-30 GMT+08:00
View PDF
Share

Enabling GitHub Third-Party Authentication and Login for RDS Supabase AI Applications

Scenarios

This section describes how to integrate GitHub OAuth 2.0 single sign-on (SSO) into an RDS Supabase instance. By configuring GitHub as a third-party identity provider, you can use your GitHub credentials for secure authentication and login without the need to register a new account. This effectively lowers the access threshold and ensures the reliability of identity authentication. Additionally, this section provides a working demo project that can be used to locally deploy a frontend application and connect it to RDS Supabase. The demo project comprehensively demonstrates the frontend implementation solution, covering authentication process configuration, session management, and user information display. This helps developers quickly understand and reuse the same pattern.

Precautions

RDS Supabase's integration with GitHub SSO depends on the Supabase Auth configuration. For detailed configurations and parameters, see the corresponding sections in RDS Supabase Application to fully understand the service scenarios and configuration process.

The frontend project for this practice is developed using the React + Node.js framework and is deployed locally for simple demonstration. You can also deploy the demo project on an ECS on the cloud and enable public network access.

Prerequisites

  • An RDS Supabase application has been created and is running properly.

    The servers of the third-party identity authentication provider (GitHub) are deployed outside the Chinese mainland. To ensure network reachability and stability and avoid authentication and access timeout caused by high latency, you are advised to purchase an RDS Supabase application in a region outside the Chinese mainland.

  • An EIP has been bound to the RDS Supabase application.
  • The Allow New User Registration function has been enabled.

    Configuration method: On the Supabase application details page, choose Auth Configuration > User Registration Configuration and turn on the switch. For details, see Configuring and Managing User Authentication (Auth).

    If this function is disabled, new user registrations are not allowed. As a result, new GitHub users cannot register or log in.

  • Security group rules have been configured to allow access to the public network. RDS Supabase must be able to communicate with GitHub and the frontend project address.
    • Inbound rules: Allow inbound traffic for IPv4 TCP port 8443. The source address must include the access addresses of GitHub, the current browser, and the client-side frontend application (corresponding to the local demo website in this practice).
    • Outbound rules: Allow outbound traffic for all IPv4 TCP ports. The destination address must include the access addresses of GitHub, the current browser, and the client-side frontend application (corresponding to the local demo website in this practice).
  • The local browser client can access the GitHub official website, and a GitHub account has been registered and an email address has been bound.
  • Node.js has been installed locally. The minimum version required is Node.js 20 LTS.
  • A browser has been installed locally. Internet Explorer is not supported. Chrome or Edge is recommended.

Constraints

  • You have fine-grained permissions for RDS Supabase.
  • In the demo scenario, SSL is disabled and only HTTP is used for access.
  • The local PC or server supports public network access, and port 5173 is not occupied.

Procedure

Step 1: Obtain the Public Network Access Address and Anon API Key of RDS Supabase

  1. Log in to the RDS console.
  2. Click in the upper left corner and select a region.
  3. In the navigation pane, choose AI App Dev Platform. In the application list, locate the target Supabase application.
  4. Click Log in to Supabase in the Operation column.
  5. In the displayed dialog box, select the EIP login mode and click Login Now to access the Supabase Dashboard page.
    Figure 1 Public network login
    Figure 2 Supabase Dashboard homepage
    • The login username is supabase.
    • The login password is set by you during application creation.
  6. In the upper left corner of the page, click Connect. The project connection configuration page is displayed.
  7. Click App Frameworks, select React from the Framework drop-down list, and view the corresponding .env environment variable configuration.
    Figure 3 RDS Supabase application environment variables
    Obtain the public network access address and anon API key from the environment variable configuration. For details, see Table 1.
    Table 1 Environment variable configuration items

    Configuration Item

    Environment Variable

    Example Value

    Supabase public access address

    VITE_SUPABASE_URL

    http://10.x.x.x:8443

    Supabase Anon API Key

    VITE_SUPABASE_ANON_KEY

    ***************

Step 2: Create a GitHub OAuth Application

  1. Log in and navigate to the GitHub developer settings page.
  2. Click New OAuth App to register a new OAuth application.
    Figure 4 GitHub OAuth creation configuration page (legacy)
    Figure 5 GitHub OAuth creation configuration page (new)
    Table 2 GitHub OAuth App registration configuration items

    Configuration Item

    Description

    Notes

    Example Value

    Application name

    The name of the OAuth App.

    Use the name of your website, software, or company.

    supabase sso demo

    Homepage URL

    The full URL of the OAuth App's official homepage.

    Use the full URL of the production homepage of your application or website.

    In this practice, the address format is as follows:

    http://{public-IP-address-of-the-local-PC-or-server}:5173

    Ensure that the NIC IP address can communicate with the RDS Supabase and GitHub networks.

    http://10.x.x.x:5173

    Authorization callback URL (legacy)

    Redirect URI (new)

    The authorization callback URL. After GitHub successfully authenticates the user, it sends a temporary authorization code to this URI. The Supabase backend captures the request and completes user registration or sign-in in the background, then securely redirects the user to the frontend project URL.

    The format is {supabase_publish_address}/auth/v1/callback, where:

    {supabase_publish_address} is the public access address of Supabase. The value is the access address obtained from Step 1: Obtain the Public Network Access Address and Anon API Key of RDS Supabase.

    http://10.x.x.x:8443/auth/v1/callback
  3. After the registration is successful, the OAuth application details page is automatically displayed.

    On the details page, click Generate a new client secret to create a security key. After clicking the button, copy the automatically generated key value immediately. The key is displayed in full only once during creation. If you miss this opportunity, you will have to click the creation button again. In this case, for security purposes, you are advised to click the delete button for the old key record to manually remove the key.

    Keep the generated client secret key secure. Accidental disclosure can lead to severe security vulnerabilities and high-risk authentication threats.

    Figure 6 GitHub OAuth App details page
    Figure 7 Client configuration items generated by GitHub OAuth
  4. Obtain the client ID and client secret generated in 3. They will be used to configure the Supabase Auth function on the management console and connect to GitHub OAuth.
    Table 3 OAuth Client configuration items

    Configuration Item

    Example Value

    Client ID

    Ov23liwhW7OTPtAW2J8W

    Client Secret

    ***************

Step 3: Configure RDS Supabase OAuth

  1. Log in to the RDS console.
  2. Click in the upper left corner and select a region.
  3. In the navigation pane, choose AI App Dev Platform. In the application list, locate the target Supabase application.
  4. Click the application name to go to the application details page.
  5. In the navigation pane, choose Auth Configuration to go to the OAuth configuration page.
  6. In the Access Control area, click Modify Access Control to configure application access control.

    For detailed operation guide and configuration items, see Configuring and Managing User Authentication (Auth).

    Figure 8 Access control configuration
  7. Click the GitHub configuration switch in the Authentication Providers area to access the GitHub authentication configuration page.

    For detailed operation guide and configuration items, see Configuring and Managing User Authentication (Auth).

    Figure 9 GitHub authentication configuration
    • GitHub OAuth App Client ID: Enter the value of Client ID in Table 3.
    • GitHub OAuth App Client Secret: Enter the value of Client Secret in Table 3.
    • Callback URL: Enter the value of Authorization callback URL in Table 2.

Step 4: Download the Demo Project Code and Start It Locally

  1. Download the demo project code to your local machine by referring to Source Code Configuration Guide for RDS Supabase GitHub SSO Demo.
  2. Go to the project directory (supabase_auth_github) and open the .env file to modify the environment variables.
    Obtain the public network access address and anon API key of Supabase from Table 1 and replace the values. 
    # Replace with the public access address of RDS Supabase.
VITE_SUPABASE_URL=http://10.x.x.x:8443
# Replace with the anon API key of RDS Supabase.
VITE_SUPABASE_ANON_KEY=***************
  3. Go to the project directory and install the project's runtime dependencies.
    Ensure that the npm registry is available. If the current registry connection is unstable or times out, switch to another available registry. 
    npm install
  4. Go to the project directory and start the frontend application.
    After the startup is successful, the console displays all accessible addresses. 
    npm run dev

Step 5: Test GitHub SSO Login Authentication

  1. Open the frontend access address of the demo project in the local browser. The address corresponds to the value of Homepage URL in Table 2.
    The following is an example address for this practice. The IP address is the public IP address of your local machine. 
    http://10.x.x.x:5173
    Figure 10 Frontend access to the local demo project
  2. Click Sign in with GitHub, which triggers the OAuth user authentication between GitHub and RDS Supabase.
    The browser address bar will automatically update, displaying the following authentication interactive view. This view will only appear once. Subsequent logouts and logins will not trigger this view. 
    https://github.com/login/oauth/authorize?client_id=***************
    Figure 11 OAuth user authentication between GitHub and RDS Supabase
  3. Click Authorize xxx. After the authentication is complete, the system automatically redirects you to the demo homepage of the frontend project, displaying the logged-in user's credentials.
    The browser address bar will automatically update, displaying information about the GitHub login user. 
    http://10.x.x.x:5173/demo
    Figure 12 Demo homepage after authentication redirection

Step 6: Confirm the RDS Supabase Login User Data

  1. Obtain the access address from Table 1 and access the RDS Supabase Dashboard page.
  2. In the navigation pane, choose Authentication to access the Auth configuration view.
  3. In the user list, you can see a new user registration and login record.

    The provider is GitHub, and the email address is the one associated with the GitHub login account.

    Figure 13 Viewing registration and login records
Parent Topic: AI Application Development Platform