diff --git a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx index 9d2cd33ca85..08abb969fa0 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx @@ -14,15 +14,18 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} /> +<$Partial +path="project_setup.mdx" +variables={{ "framework": "exporeactnative", "tab": "mobiles" }} +/> ## Building the app -Let's start building the React Native app from scratch. +Start by building the React Native app from scratch. ### Initialize a React Native app -We can use [`expo`](https://docs.expo.dev/get-started/create-a-new-app/) to initialize +Use [`expo`](https://docs.expo.dev/get-started/create-a-new-app/) to initialize an app called `expo-user-management`: ```bash @@ -31,14 +34,14 @@ npx create-expo-app -t expo-template-blank-typescript expo-user-management cd expo-user-management ``` -Then let's install the additional dependencies: [supabase-js](https://github.com/supabase/supabase-js) +Then install the additional dependencies: ```bash npx expo install @supabase/supabase-js @rneui/themed expo-sqlite ``` -Now let's create a helper file to initialize the Supabase client. -We need the API URL and the key that you copied [earlier](#get-api-details). +Now create a helper file to initialize the Supabase client using the API URL and the key that you copied [earlier](#get-api-details). + These variables are safe to expose in your Expo app since Supabase has [Row Level Security](/docs/guides/database/postgres/row-level-security) enabled on your Database. @@ -51,26 +54,11 @@ These variables are safe to expose in your Expo app since Supabase has > - <$CodeTabs> - - ```ts name=lib/supabase.ts - import 'expo-sqlite/localStorage/install'; - import { createClient } from '@supabase/supabase-js' - - const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL - const supabasePublishableKey = YOUR_REACT_NATIVE_SUPABASE_PUBLISHABLE_KEY - - export const supabase = createClient(supabaseUrl, supabasePublishableKey, { - auth: { - storage: localStorage, - autoRefreshToken: true, - persistSession: true, - detectSessionInUrl: false, - }, - }) - ``` - - + <$CodeSample + path="/user-management/expo-user-management/lib/supabase.ts" + lines={[[1, -1]]} + meta="name=lib/supabase.ts" + /> @@ -78,6 +66,7 @@ These variables are safe to expose in your Expo app since Supabase has If you wish to encrypt the user's session information, you can use `aes-js` and store the encryption key in [Expo SecureStore](https://docs.expo.dev/versions/latest/sdk/securestore). The [`aes-js` library](https://github.com/ricmoo/aes-js) is a reputable JavaScript-only implementation of the AES encryption algorithm in CTR mode. A new 256-bit encryption key is generated using the `react-native-get-random-values` library. This key is stored inside Expo's SecureStore, while the value is encrypted and placed inside AsyncStorage. Make sure that: + - You keep the `expo-secure-storage`, `aes-js` and `react-native-get-random-values` libraries up-to-date. - Choose the correct [`SecureStoreOptions`](https://docs.expo.dev/versions/latest/sdk/securestore/#securestoreoptions) for your app's needs. E.g. [`SecureStore.WHEN_UNLOCKED`](https://docs.expo.dev/versions/latest/sdk/securestore/#securestorewhen_unlocked) regulates when the data can be accessed. - Carefully consider optimizations or other modifications to the above example, as those can lead to introducing subtle security vulnerabilities. @@ -169,110 +158,14 @@ These variables are safe to expose in your Expo app since Supabase has ### Set up a login component -Let's set up a React Native component to manage logins and sign ups. -Users would be able to sign in with their email and password. +Set up a React Native component to manage logins and sign ups. +Users should be able to sign in with their email and password. -<$CodeTabs> - -```tsx name=components/Auth.tsx -import React, { useState } from 'react' -import { Alert, StyleSheet, View, AppState } from 'react-native' -import { supabase } from '../lib/supabase' -import { Button, Input } from '@rneui/themed' - -// Tells Supabase Auth to continuously refresh the session automatically if -// the app is in the foreground. When this is added, you will continue to receive -// `onAuthStateChange` events with the `TOKEN_REFRESHED` or `SIGNED_OUT` event -// if the user's session is terminated. This should only be registered once. -AppState.addEventListener('change', (state) => { - if (state === 'active') { - supabase.auth.startAutoRefresh() - } else { - supabase.auth.stopAutoRefresh() - } -}) - -export default function Auth() { - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [loading, setLoading] = useState(false) - - async function signInWithEmail() { - setLoading(true) - const { error } = await supabase.auth.signInWithPassword({ - email: email, - password: password, - }) - - if (error) Alert.alert(error.message) - setLoading(false) - } - - async function signUpWithEmail() { - setLoading(true) - const { - data: { session }, - error, - } = await supabase.auth.signUp({ - email: email, - password: password, - }) - - if (error) Alert.alert(error.message) - if (!session) Alert.alert('Please check your inbox for email verification!') - setLoading(false) - } - - return ( - - - setEmail(text)} - value={email} - placeholder="email@address.com" - autoCapitalize={'none'} - /> - - - setPassword(text)} - value={password} - secureTextEntry={true} - placeholder="Password" - autoCapitalize={'none'} - /> - - -