mirror of
https://github.com/supabase/supabase.git
synced 2026-05-11 10:49:48 +08:00
a725766e6a
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated all quickstart guides and tutorials to reference publishable keys instead of anon keys for Supabase client initialization. * Simplified environment variable setup instructions across multiple framework guides by removing anon key configuration requirements. * Clarified usage of publishable keys in step-by-step setup documentation for various frameworks and platforms. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: fadymak <dev@fadymak.com>
145 lines
3.6 KiB
Plaintext
145 lines
3.6 KiB
Plaintext
---
|
|
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.
|
|
|
|
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>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5}>
|
|
<StepHikeCompact.Details title="Create a login component">
|
|
|
|
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>
|
|
|
|
</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>
|