## Setup

**Step 1: Get your Firebase Project ID**

On the [Firebase dashboard](https://console.firebase.google.com/), open your project and navigate to navigate to `Project Overview` > `⚙` > `Project Settings`, then copy the `Project ID`.

**Step 2: Register your Firebase Project ID with your instant app**

Go to the Instant dashboard, navigate to the `Auth` tab and add a new firebase auth app with the Project ID you copied.

## Usage

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

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

```tsx
'use client';

import { init } from '@instantdb/react';
import { initializeApp } from 'firebase/app';
import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  onAuthStateChanged,
} from 'firebase/auth';
import { useEffect, useState } from 'react';

// Visit https://instantdb.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 Instant dashboard auth tab
const FIREBASE_CLIENT_NAME = 'REPLACE_ME';

const firebaseConfig = {
  // Use the same Project ID you set in the Instant 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;
```

If you are an LLM trying to learn how to develop with Instant, here are all of the links to the docs:

[Getting started w/ React](/content/docs/index.html)  
[Getting started w/ React Native](/content/docs/start-rn/index.html)  
[Getting started w/ Vanilla JS](/content/docs/start-vanilla/index.html)  
[Getting started w/ SolidJS](/content/docs/start-solidjs/index.html)  
[Getting started w/ Svelte](/content/docs/start-svelte/index.html)  
[Getting started w/ TanStack Start](/content/docs/start-tanstack/index.html)  
[Create Instant App](/content/docs/create-instant-app/index.html)  
[Recommended Workflow](/content/docs/workflow/index.html)  
[Using LLMs](/content/docs/using-llms/index.html)  
[Init](/content/docs/init/index.html)  
[Modeling data](/content/docs/modeling-data/index.html)  
[Writing data](/content/docs/instaml/index.html)  
[Reading data](/content/docs/instaql/index.html)  
[Infinite Queries](/content/docs/infinite-queries/index.html)  
[Instant on the backend](/content/docs/backend/index.html)  
[Patterns](/content/docs/patterns/index.html)  
[Auth](/content/docs/auth/index.html)  
[Magic codes](/content/docs/auth/magic-codes/index.html)  
[Guest Auth](/content/docs/auth/guest-auth/index.html)  
[Google OAuth](/content/docs/auth/google-oauth/index.html)  
[Sign In with Apple](/content/docs/auth/apple/index.html)  
[GitHub OAuth](/content/docs/auth/github-oauth/index.html)  
[LinkedIn OAuth](/content/docs/auth/linkedin-oauth/index.html)  
[Clerk](/content/docs/auth/clerk/index.html)  
[Firebase Auth](/content/docs/auth/firebase/index.html)  
[Permissions](/content/docs/permissions/index.html)  
[Rate Limits](/content/docs/rate-limits/index.html)  
[Managing users](/content/docs/users/index.html)  
[Presence, Cursors, and Activity](/content/docs/presence-and-topics/index.html)  
[Instant CLI](/content/docs/cli/index.html)  
[Devtool](/content/docs/devtool/index.html)  
[Platform API](/content/docs/platform-api/index.html)  
[Explorer Component](/content/docs/explorer-component/index.html)  
[Custom emails](/content/docs/emails/index.html)  
[App teams](/content/docs/teams/index.html)  
[Storage](/content/docs/storage/index.html)  
[Streams](/content/docs/streams/index.html)  
[Stripe Payments](/content/docs/stripe-payments/index.html)  
[Admin HTTP API](/content/docs/http-api/index.html)  
[(Experimental) Next.js SSR](/content/docs/next-ssr/index.html)  
[Migrating from Supabase](/content/docs/migrate-from-supabase/index.html)