Set up GitHub authentication for RDS Supabase - ApsaraDB RDS

This topic describes how to configure and enable third-party authentication for an RDS Supabase instance using GitHub as an example.

Background information

RDS Supabase supports integration with major third-party identity providers (IdPs), such as GitHub, Google, WeChat, and Alipay, to enable OAuth authentication. This feature allows users to log on to RDS Supabase applications with their existing third-party accounts. This simplifies the registration process and improves the user experience.

For more information about all supported providers and their parameter settings, see Alibaba Cloud RDS Supabase Authentication.

The following sections use GitHub as an example to describe how to configure and enable third-party authentication for an RDS Supabase instance.

Prerequisites

You have created an active Alibaba Cloud RDS Supabase instance.
You have a GitHub account.

Procedure

The configuration process consists of three main parts: creating a GitHub OAuth application, configuring the RDS Supabase instance, and verifying the feature.

Step 1: Create and configure a GitHub OAuth application

First, create an OAuth application on GitHub to obtain the Client ID and Client Secret for API authentication.

Log on to GitHub and go to the developer settings page.
In the navigation pane on the left, choose OAuth Apps and then click New OAuth App.
On the registration page, enter the application information:
- Application name: Enter a name for your application.
- Homepage URL: Enter the homepage URL of your application.
- Authorization callback URL: Enter the public endpoint of your RDS Supabase instance and append the path /auth/v1/callback. The format is https://<Supabase public endpoint>/auth/v1/callback.
  Note
  Do not include the port number in the Supabase public endpoint.
Click Register application.
After registration, the page automatically redirects to the application details page. Record the Client ID displayed on the page.
Click Generate a new client secret to generate a client secret.
Important
The GitHub Client Secret is displayed in full only once when it is generated. Securely save it for later configuration.

Step 2: Configure RDS Supabase authentication parameters

After you obtain the credentials for the GitHub OAuth app, configure the required parameters in your RDS Supabase instance to enable this authentication method.

Go to the RDS console home page. In the navigation pane on the left, click AI Application Development. Select a region at the top and then click the Project ID to go to the RDS Supabase instance details page.
In the navigation pane on the left, click Auth Configuration.
Click Identity Providers > GitHub and configure the following parameters:
- Enable GitHub Logon: Turn on this switch to enable GitHub logon.
- Client ID of the GitHub OAuth App: Enter the Client ID of the GitHub OAuth app that you obtained in Step 1.
- Client Secret of the GitHub OAuth App: Enter the Client Secret of the GitHub OAuth app that you obtained in Step 1.
- Authorization callback URL: Enter the same Authorization callback URL that you configured in Step 1.
After you complete the configuration, click Confirm. The instance automatically restarts for the settings to take effect. Wait for the restart to be completed.

Step 3: Configure the RDS Supabase whitelist

To ensure that your application can access the RDS Supabase instance, add its public IP address to the RDS Supabase access whitelist.

Go to the RDS console home page. In the navigation pane on the left, click AI Application Development.
Select a region at the top. In the RDS Supabase list, click the Project ID of the target instance to go to its details page.
On the Basic Information page, in the Whitelist Information section, click Add Whitelist Group to add the IP address of the target client to the whitelist.

Step 4: Allow the instance to access the public network

To ensure that the RDS Supabase instance can send API requests to the GitHub server over the public network to complete the OAuth authentication flow, enable Allow Instance to Access Public Network.

Go to the Basic Information page of the instance.
Turn on the Allow Instance to Access Public Network switch in the Network Information section.

Note

If the third-party application is in a region outside China, purchase an RDS Supabase instance in a region outside China to ensure the stability and performance of the third-party authentication feature.

Step 5: Verify the GitHub authentication feature

After you complete the preceding configurations, you can build a simple frontend project to verify that the GitHub logon flow works as expected.

Initialize the project structure
Create a project folder that contains the following files:
- index.html: The frontend page structure.
- main.js: The core authentication logic.
- supabase-config.js: The RDS Supabase connection configuration.
- package.json: The project dependencies and script configuration.

Write the code

Create the following files in the project and add the corresponding content.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Supabase GitHub Authentication Test</title>
 <style>
 body {
 font-family: Arial, sans-serif;
 max-width: 800px;
 margin: 0 auto;
 padding: 20px;
 background-color: #f5f5f5;
 }
 .container {
 background-color: white;
 padding: 30px;
 border-radius: 10px;
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 .hidden {
 display: none;
 }
 button {
 background-color: #333;
 color: white;
 border: none;
 padding: 12px 24px;
 border-radius: 5px;
 cursor: pointer;
 font-size: 16px;
 margin: 10px 0;
 }
 button:hover {
 background-color: #555;
 }
 button.github {
 background-color: #24292e;
 }
 button.github:hover {
 background-color: #333;
 }
 button.logout {
 background-color: #dc3545;
 }
 button.logout:hover {
 background-color: #c82333;
 }
 .user-info {
 background-color: #f8f9fa;
 padding: 20px;
 border-radius: 5px;
 margin: 20px 0;
 border-left: 4px solid #007bff;
 }
 .error {
 color: #dc3545;
 background-color: #f8d7da;
 padding: 10px;
 border-radius: 5px;
 margin: 10px 0;
 }
 .success {
 color: #155724;
 background-color: #d4edda;
 padding: 10px;
 border-radius: 5px;
 margin: 10px 0;
 }
 </style>
</head>
<body>
 <div class="container">
 <h1>Supabase GitHub Authentication Test</h1>
 
 <!-- Displayed before logon -->
 <div id="login-section">
 <h2>Log On</h2>
 <p>Click the button below to log on with your GitHub account</p>
 <button id="github-login" class="github">Log on with GitHub</button>
 <div id="login-error" class="error hidden"></div>
 </div>
 
 <!-- Displayed after logon -->
 <div id="user-section" class="hidden">
 <h2>User Information</h2>
 <div class="user-info">
 <p> </p>
 <p> </p>
 <p> </p>
 <p></p>
 <img id="user-avatar" src="" alt="Profile picture" style="width: 100px; height: 100px; border-radius: 50%;">
 </div>
 <button id="logout" class="logout">Log Out</button>
 <div id="logout-error" class="error hidden"></div>
 </div>
 
 <!-- Status information -->
 <div id="status" class="success hidden"></div>
 </div>
 <script type="module" src="/main.js"></script>
</body>
</html>

main.js

// Import the Supabase configuration
import { SUPABASE_CONFIG } from './supabase-config.js';
// Initialize the Supabase client
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(SUPABASE_CONFIG.url, SUPABASE_CONFIG.anonKey);
// DOM elements
const loginSection = document.getElementById('login-section');
const userSection = document.getElementById('user-section');
const githubLoginBtn = document.getElementById('github-login');
const logoutBtn = document.getElementById('logout');
const loginError = document.getElementById('login-error');
const logoutError = document.getElementById('logout-error');
const statusDiv = document.getElementById('status');
// Check the user's logon status
async function checkUser() {
 const { data: { user } } = await supabase.auth.getUser();
 if (user) {
 showUser(user);
 } else {
 showLogin();
 }
}
// Display the logon interface
function showLogin() {
 loginSection.classList.remove('hidden');
 userSection.classList.add('hidden');
}
// Display user information
function showUser(user) {
 document.getElementById('user-id').textContent = user.id;
 document.getElementById('user-name').textContent = user.user_metadata?.name || user.email;
 document.getElementById('user-email').textContent = user.email;
 const avatarUrl = user.user_metadata?.avatar_url || '';
 document.getElementById('user-avatar').src = avatarUrl;
 document.getElementById('user-avatar').style.display = avatarUrl ? 'block' : 'none';
 
 loginSection.classList.add('hidden');
 userSection.classList.remove('hidden');
}
// Log on with GitHub
async function loginWithGitHub() {
 loginError.classList.add('hidden');
 try {
 const { data, error } = await supabase.auth.signInWithOAuth({
 provider: 'github',
 options: {
 redirectTo: window.location.origin
 }
 });
 
 if (error) throw error;
 } catch (error) {
 console.error('Logon failed:', error);
 loginError.textContent = 'Logon failed: ' + error.message;
 loginError.classList.remove('hidden');
 }
}
// Log out
async function logout() {
 logoutError.classList.add('hidden');
 try {
 const { error } = await supabase.auth.signOut();
 if (error) throw error;
 showLogin();
 statusDiv.textContent = 'Successfully logged out';
 statusDiv.classList.remove('hidden');
 setTimeout(() => statusDiv.classList.add('hidden'), 3000);
 } catch (error) {
 console.error('Log out failed:', error);
 logoutError.textContent = 'Log out failed: ' + error.message;
 logoutError.classList.remove('hidden');
 }
}
// Event listeners
githubLoginBtn.addEventListener('click', loginWithGitHub);
logoutBtn.addEventListener('click', logout);
// Listen for authentication state changes
supabase.auth.onAuthStateChange((event, session) => {
 console.log('Authentication state changed:', event);
 if (event === 'SIGNED_IN') {
 showUser(session.user);
 statusDiv.textContent = 'Logon successful!';
 statusDiv.classList.remove('hidden');
 setTimeout(() => statusDiv.classList.add('hidden'), 3000);
 } else if (event === 'SIGNED_OUT') {
 showLogin();
 statusDiv.textContent = 'Logged out';
 statusDiv.classList.remove('hidden');
 setTimeout(() => statusDiv.classList.add('hidden'), 3000);
 }
});
// Check the user status when the page loads
checkUser();

package.json

package.json
{
 "name": "supabase-github-auth-test",
 "version": "1.0.0",
 "description": "Test Supabase GitHub authentication",
 "main": "index.js",
 "scripts": {
 "dev": "vite",
 "build": "vite build",
 "preview": "vite preview"
 },
 "keywords": ["supabase", "github", "authentication"],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "@supabase/supabase-js": "^2.38.4"
 },
 "devDependencies": {
 "vite": "^4.5.0"
 }
}

supabase-config.js

// Supabase configuration file
// Replace the placeholders in this file with your actual Supabase project information
export const SUPABASE_CONFIG = {
 // Your Supabase project URL
 url: 'YOUR_SUPABASE_URL',
 
 // Your Supabase anonymous key (anon key)
 anonKey: 'YOUR_SUPABASE_ANON_KEY'
};

Obtain and configure Supabase connection information
Before you run the project, see RDS Supabase SDK User Guide to obtain the SUPABASE_URL and Anon Key for Supabase. Replace the values of url and anonKey in the supabase-config.js file.
Run and test the project
1. Open a terminal in the project's root directory. Run the following commands to install dependencies and start the server:
```
npm install
npm run dev
```
2. After the commands are successfully executed, open a browser and visit http://localhost:5173.
3. On the page, click Log on with GitHub. The page redirects to the GitHub authorization page.
4. After successful authorization, the page automatically redirects back and displays the user information, such as user ID, username, and email, obtained from GitHub. This indicates that the authentication is successful.
Verify the backend data
1. Go to the RDS console home page. In the navigation pane on the left, click AI Application Development.
2. Select a region at the top. In the RDS Supabase list, click the Project ID of the target instance to go to its details page.
3. Click Network Information > Public Endpoint to go to the Supabase logon page.
  Note
  If you use an ECS instance in the same VPC as the RDS Supabase project to log on, use the Internal Endpoint.
4. In the navigation pane on the left, click Authentication > Users. View the new user information for the user who just logged on with GitHub to confirm that the user data has been synchronized to RDS Supabase.