GitHub OAuth

Superlayer supports logging users in with their GitHub account. GitHub uses OAuth 2.0 for authentication, which provides a secure way for users to sign in without sharing their passwords.

Choose the option that sounds best to you, and the rest of the document will show you how to add Sign in with GitHub to your app.

#Overview

There are three main steps:

1. GitHub Developer Settings: Create an OAuth App.
2. Superlayer Dashboard: Connect your OAuth App to Superlayer.
3. Your app: Add code to log in with GitHub!

Let's dive deeper into each step:

#1. Create an OAuth App

1. Go to your GitHub account Developer settings.
2. Click on "OAuth Apps" in the sidebar.
3. Click "New OAuth App" (or "Register a new application" if it's your first).
4. Fill in the application details:
   • Application name: Your app's name (users will see this)
   • Homepage URL: Your app's website
   • Authorization callback URL: https://api.interfacedb.com/runtime/oauth/callback
5. Click "Register application".
6. After creation, you'll see your Client ID.
7. Click "Generate a new client secret" to get your Client Secret.

#2. Connect your OAuth App to Superlayer

Add your OAuth App on Superlayer

npx @superlayer/cli@latest auth client add \
  --type github --name github-web \
  --client-id <id> --client-secret <secret>

Register your website with Superlayer

If you're testing from localhost, add http://localhost:3000 (replacing 3000 with the port you use). For production, add your website's domain.

npx @superlayer/cli@latest auth origin add --type website --url <your-domain>

And voila, you are connected!

#3. Add some code!

Method: Web Redirect

Create an authorization URL via db.auth.createAuthorizationURL and then use the URL to create a link. Here's a full example:

'use client';
 
import React from 'react';
import { init } from '@superlayer/react';
 
const APP_ID = '__APP_ID__';
 
const db = init({ appId: APP_ID });
 
export default function App() {
  const url = db.auth.createAuthorizationURL({
    // Use the GitHub client name from the Superlayer dashboard auth tab
    clientName: 'github-web',
    redirectURL: window.location.href,
  });
 
  return (
    <>
      <db.SignedIn>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login url={url} />
      </db.SignedOut>
    </>
  );
}
 
function UserInfo() {
  const user = db.useUser();
  return <h1>Hello {user.email}!</h1>;
}
 
function Login({ url }) {
  return <a href={url}>Log in with GitHub</a>;
}

When your users click on the link, they'll be redirected to GitHub to authorize your app, then back to your site.

Superlayer will automatically log them in to your app when they are redirected!

#Scopes

GitHub uses OAuth scopes to control access. The basic scopes Superlayer requests are:

• read:user - Read access to profile information
• user:email - Read access to email addresses