Pengesahan E-mel dan OAuth
Laksanakan pendaftaran dan log masuk dengan e-mel/kata laluan, tambahkan Google OAuth menggunakan WebBrowser untuk aliran ubah hala, dan kekalkan sesi merentas mula semula aplikasi.
Pengesahan E-mel dan OAuth ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Pilihan Pengesahan dalam Supabase
Supabase Auth menyokong pelbagai strategi pengesahan secara terbina dalam: e-mel/kata laluan, pautan ajaib (e-mel tanpa kata laluan), penyedia OAuth (Google, Apple, GitHub dan sebagainya), serta OTP telefon. Semua pilihan ini boleh diakses melalui API supabase.auth yang sama.
Untuk React Native, aliran yang paling biasa ialah e-mel/kata laluan kerana kesederhanaannya, serta OAuth Google/Apple untuk pengalaman asli yang lebih kemas. Supabase mengurus penyimpanan token, penyegaran dan tamat tempoh secara automatik apabila AsyncStorage dikonfigurasikan.
Mendaftar dengan E-mel dan Kata Laluan
Untuk mendaftarkan pengguna baharu, panggil supabase.auth.signUp dengan e-mel dan kata laluan. Supabase mencipta pengguna dalam jadual auth.users dan menghantar e-mel pengesahan. data.session yang dikembalikan akan menjadi null sehingga pengguna mengesahkan e-mel mereka, melainkan Anda melumpuhkan pengesahan e-mel dalam papan pemuka Supabase.
Sentiasa semak medan error dalam respons dan paparkan mesej yang bermakna kepada pengguna jika pendaftaran gagal.
import { supabase } from '../lib/supabase';
async function signUp(email: string, password: string) {
const { data, error } = await supabase.auth.signUp({
email,
password,
});
if (error) {
console.error('Sign up error:', error.message);
return null;
}
// data.user is available; data.session may be null until email confirmed
return data.user;
}Log Masuk dengan E-mel dan Kata Laluan
Untuk pengguna yang kembali, panggil supabase.auth.signInWithPassword. Apabila berjaya, Supabase mengembalikan sesi dengan JWT dan token penyegar. Dengan persistSession: true, klien menyimpan sesi ini ke AsyncStorage secara automatik.
Jika pengguna memasukkan kelayakan yang salah, ralat akan mempunyai mesej seperti Invalid login credentials. Petakan mesej ini kepada mesej yang mudah difahami pengguna seperti E-mel atau kata laluan tidak betul, bukannya mendedahkan teks ralat dalaman.
async function signIn(email: string, password: string) {
const { data, error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) {
Alert.alert('Login Failed', 'Email or password is incorrect.');
return;
}
// Session is saved automatically; navigate to main app
console.log('Signed in as:', data.user?.email);
}Log Keluar
Proses log keluar adalah mudah: panggil supabase.auth.signOut(). Tindakan ini membatalkan sesi pada pelayan, mengosongkannya daripada AsyncStorage dan mencetuskan peristiwa SIGNED_OUT dalam onAuthStateChange.
Corak pengalaman pengguna yang baik ialah menavigasikan pengguna ke skrin log masuk dalam pendengar onAuthStateChange, bukannya terus selepas memanggil signOut, supaya semua bahagian aplikasi bertindak balas secara konsisten terhadap perubahan keadaan pengesahan tanpa mengira tempat signOut dicetuskan.
async function signOut() {
const { error } = await supabase.auth.signOut();
if (error) {
console.error('Sign out error:', error.message);
}
// Navigation to login happens in onAuthStateChange listener
}Membina Komponen Skrin Pengesahan
Skrin pengesahan lazim menyimpan e-mel dan kata laluan dalam keadaan komponen, menyediakan butang Log Masuk dan Daftar, serta memaparkan penunjuk pemuatan semasa panggilan tak segerak sedang berjalan. Pastikan borang ringkas: dua komponen TextInput dan dua butang TouchableOpacity sudah memadai untuk skrin log masuk yang berfungsi.
Gunakan prop keyboardType='email-address' pada medan e-mel dan secureTextEntry pada medan kata laluan untuk meningkatkan pengalaman pengguna pada papan kekunci mudah alih.
import { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, ActivityIndicator } from 'react-native';
import { supabase } from '../lib/supabase';
export function AuthScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
async function handleSignIn() {
setLoading(true);
await supabase.auth.signInWithPassword({ email, password });
setLoading(false);
}
return (
<View>
<TextInput value={email} onChangeText={setEmail} keyboardType='email-address' />
<TextInput value={password} onChangeText={setPassword} secureTextEntry />
{loading ? <ActivityIndicator /> : (
<TouchableOpacity onPress={handleSignIn}>
<Text>Sign In</Text>
</TouchableOpacity>
)}
</View>
);
}OAuth dengan Google: Memasang Kebergantungan
OAuth dalam React Native memerlukan pembukaan pelayar luaran untuk skrin persetujuan penyedia, kemudian menangkap pengalihan kembali ke aplikasi. Pendekatan yang disyorkan dengan Expo menggunakan expo-web-browser dan expo-auth-session.
Pasang pakej ini dengan npx expo install expo-web-browser expo-auth-session. Anda juga mesti mengkonfigurasikan URL pengalihan yang boleh digunakan oleh pelayar untuk mengembalikan kawalan kepada aplikasi selepas pengguna memberikan persetujuan. Dalam Expo, URL ini kelihatan seperti exp://your.project/--/auth/callback semasa pembangunan.
npx expo install expo-web-browser expo-auth-session
# In app.json, register a deep-link scheme:
# {
# 'expo': {
# 'scheme': 'myapp'
# }
# }
#
# This makes the redirect URL:
# myapp://auth/callbackMelaksanakan Aliran OAuth Google
Panggil supabase.auth.signInWithOAuth untuk mendapatkan URL OAuth, kemudian bukanya dengan WebBrowser.openAuthSessionAsync. Apabila pelayar mengalihkan kembali ke aplikasi Anda dengan token sesi dalam URL, ekstrak token tersebut dan panggil supabase.auth.setSession.
Anda mesti mendaftarkan URL pengalihan dalam papan pemuka Supabase di bawah Authentication > URL Configuration > Redirect URLs dan turut mengkonfigurasikan skema tersuai aplikasi supaya OS menghalakan pengalihan kembali dengan betul.
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
import { supabase } from '../lib/supabase';
async function signInWithGoogle() {
const redirectUrl = Linking.createURL('/auth/callback');
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: { redirectTo: redirectUrl },
});
if (error || !data.url) return;
const result = await WebBrowser.openAuthSessionAsync(data.url, redirectUrl);
if (result.type === 'success') {
const { url } = result;
// Extract tokens from URL and set session
const parsedUrl = new URL(url);
const accessToken = parsedUrl.searchParams.get('access_token')!;
const refreshToken = parsedUrl.searchParams.get('refresh_token')!;
await supabase.auth.setSession({ access_token: accessToken, refresh_token: refreshToken });
}
}Mendapatkan Pengguna Semasa
Selepas log masuk, Anda boleh mendapatkan pengguna yang sedang disahkan pada bila-bila masa dengan memanggil supabase.auth.getUser(). Tindakan ini mengesahkan JWT dengan pelayan Supabase, menjadikannya lebih selamat berbanding membaca objek session.user yang dicache.
Untuk kes yang mementingkan prestasi dan hanya memerlukan ID pengguna, membaca session?.user daripada supabase.auth.getSession() mengelakkan perjalanan ulang-alik rangkaian. Gunakan getUser() untuk operasi yang sensitif dari segi keselamatan dan getSession() untuk tujuan paparan.
// Secure: validates with Supabase server
async function getAuthenticatedUser() {
const { data: { user }, error } = await supabase.auth.getUser();
if (error) {
console.error('Auth error:', error.message);
return null;
}
return user; // { id, email, created_at, ... }
}
// Fast: reads from local cache
async function getUserFromSession() {
const { data: { session } } = await supabase.auth.getSession();
return session?.user ?? null;
}Melindungi Skrin Berdasarkan Keadaan Pengesahan
Corak yang kemas untuk melindungi skrin ialah mencipta pelayar akar yang memantau sesi Supabase dan bertukar antara tindanan pengesahan dengan tindanan aplikasi utama berdasarkan kewujudan sesi.
Letakkan pendengar onAuthStateChange dalam komponen susun atur akar. Apabila sesi ialah null, paparkan skrin log masuk; apabila sesi wujud, paparkan skrin aplikasi utama. React Navigation mengendalikan peralihan secara automatik.
import { NavigationContainer } from '@react-navigation/native';
import { useSession } from '../hooks/useSession';
export function RootNavigator() {
const session = useSession(); // custom hook using onAuthStateChange
return (
<NavigationContainer>
{session ? <AppStack /> : <AuthStack />}
</NavigationContainer>
);
}Aliran Tetapan Semula Kata Laluan
Supabase menyediakan aliran tetapan semula kata laluan terbina dalam. Panggil supabase.auth.resetPasswordForEmail dengan alamat e-mel pengguna. Supabase menghantar e-mel yang mengandungi pautan ajaib. Apabila pengguna mengetik pautan tersebut, mereka akan dibawa ke halaman tetapan semula kata laluan untuk menetapkan kata laluan baharu.
Dalam persediaan pautan mendalam mudah alih, Anda mengkonfigurasikan URL pengalihan supaya menghala kembali ke aplikasi, kemudian memanggil supabase.auth.updateUser({ password: newPassword }) selepas pengguna memasukkan kelayakan baharu mereka.
// Step 1: Send password reset email
async function requestPasswordReset(email: string) {
const { error } = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: 'myapp://auth/reset-password',
});
if (!error) {
Alert.alert('Check your email', 'A password reset link has been sent.');
}
}
// Step 2: After the user follows the link and is redirected to the app,
// update their password:
async function updatePassword(newPassword: string) {
const { error } = await supabase.auth.updateUser({ password: newPassword });
if (!error) {
Alert.alert('Success', 'Your password has been updated.');
}
}Mengendalikan Ralat Pengesahan dengan Baik
Sentiasa kendalikan ralat pengesahan dengan cara yang mudah difahami pengguna. Ralat pengesahan Supabase yang biasa termasuk:
- Kelayakan log masuk tidak sah — e-mel atau kata laluan salah
- Pengguna telah didaftarkan — e-mel telah digunakan semasa pendaftaran
- E-mel belum disahkan — pengguna telah mendaftar tetapi masih belum mengesahkan e-mel mereka
Petakan mesej teknikal ini kepada mesej UI yang jelas. Pertimbangkan untuk menyimpan rentetan authError dalam keadaan dan memaparkannya di bawah medan borang dalam komponen Text berwarna merah.
const ERROR_MESSAGES: Record<string, string> = {
'Invalid login credentials': 'Email or password is incorrect.',
'User already registered': 'This email is already in use.',
'Email not confirmed': 'Please confirm your email before signing in.',
};
async function handleSignIn(email: string, password: string) {
const { error } = await supabase.auth.signInWithPassword({ email, password });
if (error) {
const friendlyMessage = ERROR_MESSAGES[error.message] ?? 'An error occurred. Try again.';
setAuthError(friendlyMessage);
}
}Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.
Rumusan Pelajaran
Dalam pelajaran ini, anda telah mempelajari: cara melaksanakan pendaftaran dan log masuk menggunakan e-mel/kata laluan, cara melaksanakan OAuth dengan Google menggunakan expo-web-browser, dan cara melindungi laluan navigasi berdasarkan sesi pengesahan Supabase. Seterusnya, kita akan meneroka cara membuat pertanyaan kepada pangkalan data Supabase daripada komponen React Native.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Pengesahan E-mel dan OAuth” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Pengesahan E-mel dan OAuth”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pengesahan E-mel dan OAuth”?
Laksanakan pendaftaran dan log masuk dengan e-mel/kata laluan, tambahkan Google OAuth menggunakan WebBrowser untuk aliran ubah hala, dan kekalkan sesi merentas mula semula aplikasi. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Pengesahan E-mel dan OAuth” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyediakan Klien Supabase dalam React Native
- Pengesahan E-mel dan OAuth
- Menyoal Pangkalan Data dengan Klien Supabase
- Langganan Masa Nyata