Firebase Auth

Superlayer supports delegating auth to Firebase Auth.

#Setup

Step 1: Get your Firebase Project ID

On the Firebase dashboard, open your project and navigate to Project Overview > ⚙ > Project Settings, then copy the Project ID.

Step 2: Register your Firebase Project ID with your Superlayer app

From the dashboard

From the Auth tab on the Superlayer dashboard, add a new Firebase client with the Project ID you copied.

From the terminal

npx @superlayer/cli@latest auth client add \
  --type firebase --name firebase --project-id <project-id>

#Usage

Use Firebase's getIdToken helper to get a JWT for your signed-in user. Then call Superlayer's db.auth.signInWithIdToken with the JWT and the client name you set on the Superlayer dashboard.

When you call db.auth.signInWithIdToken, Superlayer will verify that the JWT was signed by your Firebase app. If verified, Superlayer will use the email in the JWT's claims to look up your user or create a new one and create a long-lived session. Be sure to call Superlayer's db.auth.signOut when you want to sign the user out.

Here is a full example:

'use client';
 
import { init } from '@superlayer/react';
import { initializeApp } from 'firebase/app';
import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  onAuthStateChanged,
} from 'firebase/auth';
import { useEffect, useState } from 'react';
 
// Visit https://interfacedb.com/dash to get your APP_ID :)
const APP_ID = '__APP_ID__';
 
const db = init({ appId: APP_ID });
 
// Use the firebase client name you set in the Superlayer dashboard auth tab
const FIREBASE_CLIENT_NAME = 'REPLACE_ME';
 
const firebaseConfig = {
  // Use the same Project ID you set in the Superlayer dashboard auth tab
  projectId: 'REPLACE_ME',
  apiKey: 'REPLACE_ME',
};
 
const firebaseApp = initializeApp(firebaseConfig);
const firebaseAuth = getAuth(firebaseApp);
 
function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
 
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(firebaseAuth, (user) => {
      if (user) {
        user.getIdToken().then((idToken) => {
          db.auth.signInWithIdToken({
            idToken,
            clientName: FIREBASE_CLIENT_NAME,
          });
        });
      } else {
        db.auth.signOut();
      }
    });
    return () => unsubscribe();
  }, []);
 
  const handleSignIn = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(firebaseAuth, email, password);
    } catch (error) {
      console.error('Sign in error:', error);
    }
  };
 
  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      await createUserWithEmailAndPassword(firebaseAuth, email, password);
    } catch (error) {
      console.error('Sign up error:', error);
    }
  };
 
  return (
    <>
      <db.SignedOut>
        <form onSubmit={handleSignIn}>
          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button type="submit">Sign In</button>
          <button type="button" onClick={handleSignUp}>
            Sign Up
          </button>
        </form>
      </db.SignedOut>
      <db.SignedIn>
        <SignedInComponent />
      </db.SignedIn>
    </>
  );
}
 
function SignedInComponent() {
  const user = db.useUser();
 
  const handleSignOut = async () => {
    await firebaseAuth.signOut();
  };
 
  return (
    <div>
      <div>Signed in as {user.email}!</div>
      <button onClick={handleSignOut}>Sign Out</button>
    </div>
  );
}
 
export default App;

Pick your app

#Setup

#Usage