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>

And voila, you are connected!

#3. Add some code!

Method: Expo Web Auth

Superlayer comes with support for Expo's AuthSession library. To use it, you need to:

1. Set up AuthSession
2. Register your app with Superlayer
3. Use AuthSession to log in with GitHub!

Let's do that.

Set up AuthSession

If you haven't already, follow the AuthSession installation instructions from the Expo docs.

Next, add the following dependencies:

npx expo install expo-auth-session expo-crypto

Update your app.json with your scheme:

{
  "expo": {
    "scheme": "mycoolredirect"
  }
}

Register your app with Superlayer

Now that you have your App Scheme, it's time to tell Superlayer about it. For development with Expo, add exp:// and your scheme (e.g. mycoolredirect://) as redirect origins.

From the dashboard

From the Auth tab on the Superlayer dashboard, add a redirect origin of type "App scheme".

From the terminal

npx @superlayer/cli@latest auth origin add --type custom-scheme --scheme exp://
npx @superlayer/cli@latest auth origin add --type custom-scheme --scheme mycoolredirect://

Use AuthSession to log in with GitHub!

And from here you're ready to add a login button to your Expo app! Here's a full example:

import { View, Text, Button } from 'react-native';
import { init } from '@superlayer/react-native';
import {
  makeRedirectUri,
  useAuthRequest,
  useAutoDiscovery,
} from 'expo-auth-session';
 
const APP_ID = '__APP_ID__';
const db = init({ appId: APP_ID });
 
function App() {
  return (
    <>
      <db.SignedIn>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </>
  );
}
 
function UserInfo() {
  const user = db.useUser();
  return (
    <View>
      <Text>Hello {user.email}!</Text>
      <Button title="Log out" onPress={() => db.auth.signOut()}></Button>
    </View>
  );
}
 
function Login() {
  const discovery = useAutoDiscovery(db.auth.issuerURI());
 
  const [request, _response, promptAsync] = useAuthRequest(
    {
      // The unique name you gave the OAuth client when you
      // registered it on the Superlayer dashboard
      clientId: 'github-web',
      redirectUri: makeRedirectUri(),
    },
    discovery,
  );
 
  return (
    <Button
      title="Log in with GitHub"
      disabled={!request}
      onPress={async () => {
        try {
          const res = await promptAsync();
          if (res.type === 'success') {
            await db.auth.exchangeOAuthCode({
              code: res.params.code,
              codeVerifier: request?.codeVerifier,
            });
          }
        } catch (e) {
          console.error(e);
        }
      }}
    />
  );
}
 
export default App;

#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