Authentication is the process of verifying the identity of a user who is attempting to access a system, application, or online service. In this blog post, you will learn about React Native authentication, including native mobile specific login mechanisms like "Sign in with Apple" and "Google One Tap sign-in", as well as SMS & WhatsApp based authentication.
At the end of this blog post, you will have all the components needed to create the ideal authentication experience for your mobile app users.
This article assumes you are comfortable with writing a basic application in React Native. No knowledge of Supabase is required.
We will use the following tools
- Expo - we used Expo SDK version 49.0.0 (React Native version 0.72)
- Supabase - create your account here if you do not have one
- IDE of your choosing
Note: We're using Expo as that's the recommended way of getting started with React Native. However, the fundamental approach here applies to bare React Native applications as well.
Using supabase-js is the most convenient way of leveraging the full power of the Supabase stack as it conveniently combines all the different services (database, auth, realtime, storage, edge functions) together.
Install supabase-js and dependencies#
After you have created your Expo project, you can install supabase-js and the required dependencies using the following command:
_10
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
Authentication storage#
By default, supabase-js uses the browser's localStorage mechanism to persist the user's session but can be extended with platform specific storage implementations. In React Native we can build native mobile and web applications with the same code base, so we need a storage implementation that works for all these platforms: react-native-async-storage.
We need to pass an instance of react-native-async-storage to supabase-js to make sure authentication works reliably across all react native platforms:
_15
import 'react-native-url-polyfill/auto'
_15
import AsyncStorage from '@react-native-async-storage/async-storage'
_15
import { createClient } from '@supabase/supabase-js'
_15
_15
const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
_15
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY
_15
_15
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
_15
auth: {
_15
storage: AsyncStorage,
_15
autoRefreshToken: true,
_15
persistSession: true,
_15
detectSessionInUrl: false,
_15
},
_15
})
You can find your URL and anon key in the API credentials section of the Supabase dashboard.
Encrypting the user session#
If you wish to encrypt the user's session information, you can use aes-js and store the encryption key in Expo SecureStore. The aes-js library 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.
Please make sure that:
- You keep the
expo-secure-storage,aes-jsandreact-native-get-random-valueslibraries up-to-date. - Choose the correct
SecureStoreOptionsfor your app's needs. E.g.SecureStore.WHEN_UNLOCKEDregulates 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.
Install the necessary dependencies in the root of your Expo project:
_10
npm install @supabase/supabase-js
_10
npm install @rneui/themed @react-native-async-storage/async-storage react-native-url-polyfill
_10
npm install aes-js react-native-get-random-values
_10
npx expo install expo-secure-store
Implement a LargeSecureStore class to pass in as Auth storage for the supabase-js client:
_69
import 'react-native-url-polyfill/auto'
_69
import { createClient } from '@supabase/supabase-js'
_69
import AsyncStorage from '@react-native-async-storage/async-storage'
_69
import * as SecureStore from 'expo-secure-store'
_69
import * as aesjs from 'aes-js'
_69
import 'react-native-get-random-values'
_69
_69
// As Expo's SecureStore does not support values larger than 2048
_69
// bytes, an AES-256 key is generated and stored in SecureStore, while
_69
// it is used to encrypt/decrypt values stored in AsyncStorage.
_69
class LargeSecureStore {
_69
private async _encrypt(key: string, value: string) {
_69
const encryptionKey = crypto.getRandomValues(new Uint8Array(256 / 8))
_69
_69
const cipher = new aesjs.ModeOfOperation.ctr(encryptionKey, new aesjs.Counter(1))
_69
const encryptedBytes = cipher.encrypt(aesjs.utils.utf8.toBytes(value))
_69
_69
await SecureStore.setItemAsync(key, aesjs.utils.hex.fromBytes(encryptionKey))
_69
_69
return aesjs.utils.hex.fromBytes(encryptedBytes)
_69
}
_69
_69
private async _decrypt(key: string, value: string) {
_69
const encryptionKeyHex = await SecureStore.getItemAsync(key)
_69
if (!encryptionKeyHex) {
_69
return encryptionKeyHex
_69
}
_69
_69
const cipher = new aesjs.ModeOfOperation.ctr(
_69
aesjs.utils.hex.toBytes(encryptionKeyHex),
_69
new aesjs.Counter(1)
_69
)
_69
const decryptedBytes = cipher.decrypt(aesjs.utils.hex.toBytes(value))
_69
_69
return aesjs.utils.utf8.fromBytes(decryptedBytes)
_69
}
_69
_69
async getItem(key: string) {
_69
const encrypted = await AsyncStorage.getItem(key)
_69
if (!encrypted) {
_69
return encrypted
_69
}
_69
_69
return await this._decrypt(key, encrypted)
_69
}
_69
_69
async removeItem(key: string) {
_69
await AsyncStorage.removeItem(key)
_69
await SecureStore.deleteItemAsync(key)
_69
}
_69
_69
async setItem(key: string, value: string) {
_69
const encrypted = await this._encrypt(key, value)
_69
_69
await AsyncStorage.setItem(key, encrypted)
_69
}
_69
}
_69
_69
const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
_69
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY
_69
_69
const supabase = createClient(supabaseUrl, supabaseAnonKey, {
_69
auth: {
_69
storage: new LargeSecureStore(),
_69
autoRefreshToken: true,
_69
persistSession: true,
_69
detectSessionInUrl: false,
_69
},
_69
})
Once we've set up the storage mechanism, building an email and password sign in flow becomes pretty straight forward. Install @rneui/themed to get some nice cross platform button and input fields:
_10
npm install @rneui/themed
Set up a simple email form component:
_83
import React, { useState } from 'react'
_83
import { Alert, StyleSheet, View } from 'react-native'
_83
import { supabase } from '../lib/supabase'
_83
import { Button, Input } from '@rneui/themed'
_83
_83
export default function EmailForm() {
_83
const [email, setEmail] = useState('')
_83
const [password, setPassword] = useState('')
_83
const [loading, setLoading] = useState(false)
_83
_83
async function signInWithEmail() {
_83
setLoading(true)
_83
const { error } = await supabase.auth.signInWithPassword({
_83
email: email,
_83
password: password,
_83
})
_83
_83
if (error) Alert.alert(error.message)
_83
setLoading(false)
_83
}
_83
_83
async function signUpWithEmail() {
_83
setLoading(true)
_83
const {
_83
data: { session },
_83
error,
_83
} = await supabase.auth.signUp({
_83
email: email,
_83
password: password,
_83
})
_83
_83
if (error) Alert.alert(error.message)
_83
if (!session) Alert.alert('Please check your inbox for email verification!')
_83
setLoading(false)
_83
}
_83
_83
return (
_83
<View style={styles.container}>
_83
<View style={[styles.verticallySpaced, styles.mt20]}>
_83
<Input
_83
label="Email"
_83
leftIcon={{ type: 'font-awesome', name: 'envelope' }}
_83
onChangeText={(text) => setEmail(text)}
_83
value={email}
_83
placeholder="email@address.com"
_83
autoCapitalize={'none'}
_83
/>
_83
</View>
_83
<View style={styles.verticallySpaced}>
_83
<Input
_83
label="Password"
_83
leftIcon={{ type: 'font-awesome', name: 'lock' }}
_83
onChangeText={(text) => setPassword(text)}
_83
value={password}
_83
secureTextEntry={true}
_83
placeholder="Password"
_83
autoCapitalize={'none'}
_83
/>
_83
</View>
_83
<View style={[styles.verticallySpaced, styles.mt20]}>
_83
<Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
_83
</View>
_83
<View style={styles.verticallySpaced}>
_83
<Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
_83
</View>
_83
</View>
_83
)
_83
}
_83
_83
const styles = StyleSheet.create({
_83
container: {
_83
marginTop: 40,
_83
padding: 12,
_83
},
_83
verticallySpaced: {
_83
paddingTop: 4,
_83
paddingBottom: 4,
_83
alignSelf: 'stretch',
_83
},
_83
mt20: {
_83
marginTop: 20,
_83
},
_83
})
Note, by default Supabase Auth requires email verification before a session is created for the users. To support email verification you need to implement deep link handling which is outlined in the next section.
While testing, you can disable email confirmation in your project's email auth provider settings.
As you saw above, we specified detectSessionInUrl: false when initializing supabase-js. By default, in a web based environment, supabase-js will automatically detect OAuth and magic link redirects and create the user session.
In native mobile apps, however, OAuth callbacks require a bit more configuration and the setup of deep linking.
To link to your development build or standalone app, you need to specify a custom URL scheme for your app. You can register a scheme in your app config (app.json, app.config.js) by adding a string under the scheme key:
_10
{
_10
"expo": {
_10
"scheme": "com.supabase"
_10
}
_10
}
In your project's auth settings add the redirect URL, e.g. com.supabase://**.
Finally, implement the OAuth and linking handlers. See the supabase-js reference for instructions on initializing the supabase-js client in React Native.
_68
import { Button } from 'react-native'
_68
import { makeRedirectUri } from 'expo-auth-session'
_68
import * as QueryParams from 'expo-auth-session/build/QueryParams'
_68
import * as WebBrowser from 'expo-web-browser'
_68
import * as Linking from 'expo-linking'
_68
import { supabase } from 'app/utils/supabase'
_68
_68
WebBrowser.maybeCompleteAuthSession() // required for web only
_68
const redirectTo = makeRedirectUri()
_68
_68
const createSessionFromUrl = async (url: string) => {
_68
const { params, errorCode } = QueryParams.getQueryParams(url)
_68
_68
if (errorCode) throw new Error(errorCode)
_68
const { access_token, refresh_token } = params
_68
_68
if (!access_token) return
_68
_68
const { data, error } = await supabase.auth.setSession({
_68
access_token,
_68
refresh_token,
_68
})
_68
if (error) throw error
_68
return data.session
_68
}
_68
_68
const performOAuth = async () => {
_68
const { data, error } = await supabase.auth.signInWithOAuth({
_68
provider: 'github',
_68
options: {
_68
redirectTo,
_68
skipBrowserRedirect: true,
_68
},
_68
})
_68
if (error) throw error
_68
_68
const res = await WebBrowser.openAuthSessionAsync(data?.url ?? '', redirectTo)
_68
_68
if (res.type === 'success') {
_68
const { url } = res
_68
await createSessionFromUrl(url)
_68
}
_68
}
_68
_68
const sendMagicLink = async () => {
_68
const { error } = await supabase.auth.signInWithOtp({
_68
email: 'example@email.com',
_68
options: {
_68
emailRedirectTo: redirectTo,
_68
},
_68
})
_68
_68
if (error) throw error
_68
// Email sent.
_68
}
_68
_68
export default function Auth() {
_68
// Handle linking into app from email app.
_68
const url = Linking.useURL()
_68
if (url) createSessionFromUrl(url)
_68
_68
return (
_68
<>
_68
<Button onPress={performOAuth} title="Sign in with GitHub" />
_68
<Button onPress={sendMagicLink} title="Send Magic Link" />
_68
</>
_68
)
_68
}
For the best user experience, it is recommended to use universal links which require a more elaborate setup. You can find the detailed setup instructions in the Expo docs.
Some native mobile operating systems, like iOS and Android, offer a built-in identity provider for convenient user authentication.
For iOS, apps that use a third-party or social login service to set up or authenticate the user’s primary account with the app must also offer Sign in with Apple as an equivalent option.
There are several benefits and reasons why you might want to add social login to your applications:
-
Improved user experience: Users can register and log in to your application using their existing app store accounts, which can be faster and more convenient than creating a new account from scratch. This makes it easier for users to access your application, improving their overall experience.
-
Better user engagement: You can access additional data and insights about your users, such as their interests, demographics, and social connections. This can help you tailor your content and marketing efforts to better engage with your users and provide a more personalized experience.
-
Increased security: Social login can improve the security of your application by leveraging the security measures and authentication protocols of the social media platforms that your users are logging in with. This can help protect against unauthorized access and account takeovers.
Sign in with Apple#
Supabase Auth supports using Sign in with Apple on the web and in native apps for iOS, macOS, watchOS, or tvOS.
For detailed setup and implementation instructions please refer to the docs and the video tutorial.
Sign in with Google#
Supabase Auth supports Sign in with Google on the web, native Android applications, and Chrome extensions.
For detailed set up and implementation instructions please refer to the docs and the video tutorial.
Supabase supports various forms of passwordless authentication:
- Email Magic Link
- Email one-time password (OTP)
- SMS & WhatsApp one-time password (OTP) (watch the video tutorial)
Passwordless login mechanisms have similar benefits as the native mobile login options mentioned above.
In this post, we learned various authentication mechanisms we can use in React Native applications to provide a delightful experience for our users across native mobile and web.