Use Supabase Auth with React Native

[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.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>

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>

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

Rename `.env.example` to `.env` and populate with your Supabase connection variables:

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


</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>

Create a React Native component to manage logins and sign ups. The app later uses the [`getClaims`](/docs/reference/javascript/auth-getclaims) method in `App.tsx` to validate the local JWT before showing the signed-in user.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

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

</StepHikeCompact.Code>

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>

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

</StepHikeCompact.Details>

<StepHikeCompact.Code>

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

</StepHikeCompact.Code>