How to Add GitHub Sign-In to a Fusabase Web App

Today, we're going to walk through how to add GitHub social sign-in to a Fusabase web app.

We'll create a GitHub OAuth App, connect it to Fusabase, and add the JavaScript that opens the GitHub authorization popup. This guide only covers GitHub sign-in for web apps.

What you need before you begin

You should already have:

• A working Fusabase project.
• A web app registered with that project.
• Authentication initialized with the Fusabase JavaScript SDK.
• The web app running at a URL you can add to GitHub, such as http://localhost:8000/starter/.
• A GitHub account that can create an OAuth App.

If you want to build the complete RecipeShare app first, use the Fusabase RecipeShare LiveLab. GitHub sign-in is Lab 9.

How GitHub sign-in works in a Fusabase web app

The browser starts the flow with signInWithPopup(). Fusabase sends the user to GitHub, receives GitHub's callback, and returns the authenticated user to the web app.

╔═ GitHub OAuth handshake ═════════════════════════════════════════╗
║                                                                  ║░
║   Browser                Fusabase                 GitHub         ║░
║      │                      │                       │            ║░
║      │  signInWithPopup()   │                       │            ║░
║      ├─────────────────────>│                       │            ║░
║      │                      │      authorize        │            ║░
║      │                      ├──────────────────────>│            ║░
║      │                      │      /callback        │            ║░
║      │                      │<──────────────────────┤            ║░
║      │    signed-in user    │                       │            ║░
║      │<─────────────────────┤                       │            ║░
║      │                      │                       │            ║░
║                                                                  ║░
╚══════════════════════════════════════════════════════════════════╝░
 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

The GitHub client secret stays in Fusabase. It does not belong in your JavaScript, app config, or Git repository.

Step 1: Copy the Fusabase redirect URI

Open your project in the Fusabase console, then open Authentication and Social login.

Open the GitHub provider and turn on Enable. Select Copy URI to copy the OAuth redirect URI generated for your project.

Copy the complete URI, including the /callback path. This is the URL GitHub will call after the user approves your OAuth App.

Do not use the URL of your web app as the callback URL. Your web app URL and the Fusabase callback URL serve different purposes.

Step 2: Register the GitHub OAuth App

In GitHub, open Settings, Developer settings, and then OAuth Apps. Select New OAuth App.

You can also go directly to GitHub's OAuth Apps settings.

Complete the form with these values:

Select Register application.

For this flow, create an OAuth App, not a GitHub App. GitHub supports both, but the Fusabase provider setup in this guide uses an OAuth App client ID and client secret.

Step 3: Copy the GitHub client credentials

GitHub now shows the new OAuth App. Copy the Client ID, then select Generate a new client secret and copy the generated secret.

Treat the client secret like a password. GitHub will not show the full value again after you leave the page, but you can generate a replacement if you lose it.

Step 4: Paste the GitHub credentials into Fusabase

Return to Authentication, Social login, and GitHub in the Fusabase console.

Paste the GitHub Client ID and Client secret, confirm that Enable is on, and select Save.

GitHub is now configured as an identity provider for this Fusabase project.

Step 5: Add the GitHub button to the web app

Add a button to your sign-in UI. The ID is what we will use to attach the JavaScript listener in the next step.

<button
  id="signInWithGithubButton"
  class="btn btn-outline"
  type="button"
>
  Sign in with GitHub
</button>

The CSS classes are from RecipeShare. Use whatever classes your own web app needs, but keep the button ID consistent with the JavaScript.

Step 6: Call the GitHub provider from JavaScript

Import GithubAuthProvider and signInWithPopup from fusabase/auth:

import {
  GithubAuthProvider,
  signInWithPopup
} from "fusabase/auth";

Get the button and start the popup flow when the user selects it:

const signInWithGithubButton = document.querySelector(
  "#signInWithGithubButton"
);
 
signInWithGithubButton.addEventListener("click", async () => {
  await signInWithPopup(auth, new GithubAuthProvider());
});

This assumes auth is the existing Auth instance returned by getAuth(app). If your app already listens with onAuthStateChanged(), that listener will receive the signed-in user after the popup completes.

Step 7: Test the complete GitHub sign-in flow

Open your own web app and click the GitHub button you added in Step 5. The screenshot below shows an example sign-in screen with the button in place.

Select Continue with GitHub. GitHub opens in a popup and asks the user to authorize the OAuth App. After authorization, the popup closes and your onAuthStateChanged() listener receives the user.

Open Authentication in the Fusabase console and confirm that the GitHub user appears in the user list with the GitHub provider icon.

Troubleshooting GitHub sign-in

GitHub reports a callback URL mismatch

Compare the Authorization callback URL in the GitHub OAuth App with the redirect URI shown by Fusabase. They need to match character-for-character, including the scheme, hostname, port, and path.

The callback should point to Fusabase, not directly to your web app.

Fusabase reports that GitHub is not configured

Open the GitHub provider in the Fusabase console and check that:

• Enable is on.
• The client ID has been saved.
• The client secret has been saved.

The popup does not open or closes without signing in

Allow popups for the web app's origin and try again. Also make sure the web app's domain is listed as an authorized frontend domain in the Fusabase project.

The email already belongs to another sign-in provider

Fusabase does not automatically link separate provider accounts that use the same email. For a quick test, use another GitHub account or remove the conflicting test user before retrying.

That's all

Your Fusabase web app can now sign users in with GitHub. The client secret remains on the Fusabase side, while the browser only needs the provider class and popup call.

If you want to build this as part of a complete app, follow Lab 9 of the Fusabase RecipeShare LiveLab.

Until next time,

-Killian

Some other info

• Creating a GitHub OAuth App
• Fusabase JavaScript SDK authentication reference
• RecipeShare web app source