## Auth Overview

To get the current user in your application, you can use the `db.useUser` hook.

```tsx
import db from '../lib/db';

function Dashboard() {
  const user = db.useUser();

return <div>Signed in as: {user.email}</div>;
}
```

The `useUser` hook will throw an error if it is accessed while the user is not logged in, so it should be gated behind `<db.SignedIn>`.

```tsx
import db from '../lib/db';

export default function App() {
  return (
    <div>
      <db.SignedIn>
        <Dashboard />
      </db.SignedIn>
      <db.SignedOut>
        <div>Log in to see the dashboard!</div>
      </db.SignedOut>
    </div>
  );
}

function Dashboard() {
  // This component will only render if the user is signed in
  // so it's safe to call useUser here!
  const user = db.useUser();

return <div>Signed in as: {user.email}</div>;
}
```

Use `<db.SignedIn>` and `<db.SignedOut>` to conditionally render components based on the user's authentication state.

You can then use `db.auth.signOut()` to sign a user out.

```tsx
import db from '../lib/db';

// ... Same app component from above

function Dashboard() {
  const user = db.useUser();

return (
    <div>
      <div>Signed in as: {user.email}</div>
      <button onClick={() => db.auth.signOut()}>Sign out</button>
    </div>
  );
}
```

Putting it all together, you can conditionally render a login and dashboard component like so:

```tsx
import db from '../lib/db';

export default function App() {
  return (
    <div>
      <db.SignedIn>
        <Dashboard />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </div>
  );
}

function Dashboard() {
  // This component will only render if the user is signed in
  // so it's safe to call useUser here!
  const user = db.useUser();

return <div>Signed in as: {user.email}</div>;
}

function Login() {
  // Implement a login flow here via magic codes, OAuth, Clerk, etc.
}
```

To implement a login flow use one of the authentication method guides below.

## Authentication Methods

- **Magic Codes**  
  Send login codes to your users via email. Removes the need for passwords.  
  [Documentation](/content/docs/auth/magic-codes/index.html)

- **Guest Auth**  
  Allow your users to try your app before they sign up.  
  [Documentation](/content/docs/auth/guest-auth/index.html)

- **Google OAuth**  
  We provide flows for Web and React Native to enable Google OAuth for your app.  
  [Documentation](/content/docs/auth/google-oauth/index.html)

- **Sign In with Apple**  
  Sign In to native apps with Apple ID.  
  [Documentation](/content/docs/auth/apple/index.html)

- **Github OAuth**  
  Log in with Github on both Web and React Native.  
  [Documentation](/content/docs/auth/github-oauth/index.html)

- **LinkedIn OAuth**  
  Log in with LinkedIn on both Web and React Native.  
  [Documentation](/content/docs/auth/linkedin-oauth/index.html)

- **Clerk**  
  Integrate Clerk's auth flow with Instant.  
  [Documentation](/content/docs/auth/clerk/index.html)

- **Firebase Auth**  
  Integrate Firebase's auth flow with Instant.  
  [Documentation](/content/docs/auth/firebase/index.html)

- **Custom Auth**  
  Integrate your own auth flow with the Admin SDK.  
  [Documentation](/content/docs/backend#custom-auth/index.html)

## Additional Auth APIs

Sometimes you need finer control over the state of auth in your application. In those cases, you can use some of the lower-level APIs.

### useAuth

Use `useAuth` to fetch the current user. In this example we guard against loading our `Main` component until a user is logged in.

```javascript
function App() {
  const { isLoading, user, error } = db.useAuth();
  if (isLoading) {
    return null; // or a loading spinner
  }
  if (error) {
    return <div className="p-4 text-red-500">Uh oh! {error.message}</div>;
  }
  if (user) {
    return <Main />;
  }
  return <Login />;
}
```

### Get auth

For scenarios where you want to know the current auth state without subscribing to changes, you can use `getAuth`.

```javascript
const user = await db.getAuth();
console.log('logged in as', user.email);
```

### Setting custom properties at signup

If you want to set custom properties on `$users` at signup time, see [Setting properties at signup](/content/docs/users#setting-properties-at-signup/index.html).

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)