supabase/apps/docs/content/guides/auth/quickstarts/react-native.mdx

---
title: 'Use Supabase Auth with React Native'
subtitle: 'Learn how to use Supabase Auth with React Native'
breadcrumb: 'Auth Quickstarts'
hideToc: true
---

<StepHikeCompact>

  <StepHikeCompact.Step step={1}>
    <StepHikeCompact.Details title="Create a new Supabase project">

    [Launch a new project](/dashboard) in the Supabase Dashboard.

    Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](/dashboard/project/_/sql).

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

     ```sql name=SQL_EDITOR
      select * from auth.users;
      ````

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={2}>

    <StepHikeCompact.Details title="Create a React app">

    Create a React app using the `create-expo-app` command.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```bash name=Terminal
      npx create-expo-app -t expo-template-blank-typescript my-app
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={3}>
    <StepHikeCompact.Details title="Install the Supabase client library">

    Install `supabase-js` and the required dependencies.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```bash name=Terminal
      cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage @rneui/themed react-native-url-polyfill
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={4}>
    <StepHikeCompact.Details title="Set up your login component">

    Create a helper file `lib/supabase.ts` that exports a Supabase client using your Project URL and key.

    Create a `.env` file and populate with your Supabase connection variables:

    <ProjectConfigVariables variable="url" />
    <ProjectConfigVariables variable="publishable" />
    <ProjectConfigVariables variable="anon" />

    </StepHikeCompact.Details>
    <StepHikeCompact.Code>

      <$CodeSample
      path="/auth/quickstarts/react-native/lib/supabase.ts"
      lines={[[1, -1]]}
      meta="name=lib/supabase.ts"
      />

      <$Partial path="api_settings_steps.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} />

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={5}>
    <StepHikeCompact.Details title="Create a login component">

    Let's set up a React Native component to manage logins and sign ups.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      <$CodeSample
      path="/auth/quickstarts/react-native/components/Auth.tsx"
      lines={[[1, -1]]}
      meta="name=components/Auth.tsx"
      />

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={6}>
    <StepHikeCompact.Details title="Add the Auth component to your app">

    Add the `Auth` component to your `App.tsx` file. If the user is logged in, print the user id to the screen.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      <$CodeSample
      path="/auth/quickstarts/react-native/App.tsx"
      lines={[[1, -1]]}
      meta="name=App.tsx"
      />

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={7}>
    <StepHikeCompact.Details title="Start the app">

    Start the app, and follow the instructions in the terminal.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```bash name=Terminal
      npm start
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>
</StepHikeCompact>