Expo + React Native: Google ile Giriş Rehberi (Android + iOS)
Bu rehber, @ademhatay/expo-google-signin ile Google girişini hızlıca kurmak içindir.
Hedef:
- Android ve iOS'ta tek API ile giriş
- Kullanıcıyı local'de saklama
- Backend'de
idToken doğrulama
1) Paket Kurulumu
Bu paket Expo Go'da çalışmaz. Development build gerekir.
npm install @ademhatay/expo-google-signin
# veya
bun add @ademhatay/expo-google-signin
npx expo run:android
npx expo run:ios
2) Google Cloud Console Ayarları
Gerekli sayfalar:
- https://console.cloud.google.com/
- https://console.cloud.google.com/apis/credentials
- https://console.cloud.google.com/apis/credentials/consent
2.1 Web OAuth Client (zorunlu)
- Tür:
Web application
- Bu ID, uygulamada
serverClientId olarak kullanılacak.
Kural:
serverClientId her zaman Web Client ID olmalı.
2.2 Android OAuth Client
- Tür:
Android
- Package name ve SHA-1 doğru olmalı.
SHA-1 alma:
cd android
./gradlew signingReport
Release sürecinde birden fazla SHA-1 olabilir (upload key, Play signing key). Gerekli olanları Console'a ekleyin.
2.3 iOS OAuth Client
- Tür:
iOS
- Bundle Identifier, uygulamadaki bundle ID ile aynı olmalı.
2.4 OAuth Consent Screen
- Uygulama
Testing modundaysa test kullanıcılarını ekleyin.
3) Expo Plugin Ayarı (iOS)
app.json veya app.config.ts:
{
"expo": {
"plugins": [
[
"@ademhatay/expo-google-signin",
{
"iosClientId": "YOUR_IOS_CLIENT_ID.apps.googleusercontent.com"
}
]
]
}
}
4) Ortam Değişkenleri
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=YOUR_WEB_CLIENT_ID.apps.googleusercontent.com
EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID=YOUR_IOS_CLIENT_ID.apps.googleusercontent.com
5) Servis Katmanı
5.1 auth-storage.ts
import AsyncStorage from '@react-native-async-storage/async-storage';
export type PersistedGoogleUser = {
id: string;
idToken: string;
displayName?: string;
givenName?: string;
familyName?: string;
profilePictureUrl?: string;
phoneNumber?: string;
};
const KEY = 'auth:google-user:v1';
export async function saveUser(user: PersistedGoogleUser | null) {
if (!user) {
await AsyncStorage.removeItem(KEY);
return;
}
await AsyncStorage.setItem(KEY, JSON.stringify(user));
}
export async function loadUser(): Promise<PersistedGoogleUser | null> {
const raw = await AsyncStorage.getItem(KEY);
if (!raw) return null;
try {
return JSON.parse(raw) as PersistedGoogleUser;
} catch {
return null;
}
}
5.2 auth-service.ts
import { Platform } from 'react-native';
import { signIn, signOut, GoogleUser } from '@ademhatay/expo-google-signin';
import { saveUser, loadUser } from './auth-storage';
const WEB_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID!;
const IOS_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID;
if (!WEB_CLIENT_ID) {
throw new Error('Missing EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID');
}
function getIosClientId() {
if (Platform.OS !== 'ios') return undefined;
return IOS_CLIENT_ID;
}
export async function loginWithGoogle(options?: { androidButtonFlow?: boolean }) {
const user = await signIn({
serverClientId: WEB_CLIENT_ID,
iosClientId: getIosClientId(),
filterByAuthorizedAccounts: false,
signInButtonFlow: options?.androidButtonFlow ?? false
});
await saveUser(user);
return user;
}
export async function logoutGoogle() {
await signOut();
await saveUser(null);
}
export async function restorePersistedUser(): Promise<GoogleUser | null> {
return loadUser();
}
5.3 AuthProvider.tsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import type { GoogleUser } from '@ademhatay/expo-google-signin';
import { loginWithGoogle, logoutGoogle, restorePersistedUser } from './auth-service';
type AuthContextValue = {
user: GoogleUser | null;
loading: boolean;
signInGoogle: (opts?: { androidButtonFlow?: boolean }) => Promise<void>;
signOutGoogle: () => Promise<void>;
};
const AuthContext = createContext<AuthContextValue | null>(null);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<GoogleUser | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
const restored = await restorePersistedUser();
setUser(restored);
setLoading(false);
})();
}, []);
async function signInGoogle(opts?: { androidButtonFlow?: boolean }) {
const next = await loginWithGoogle(opts);
setUser(next);
}
async function signOutGoogle() {
await logoutGoogle();
setUser(null);
}
return (
<AuthContext.Provider value={{ user, loading, signInGoogle, signOutGoogle }}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
return ctx;
}
5.4 Ekran Kullanımı
import React from 'react';
import { View, Text, Pressable, Platform } from 'react-native';
import { useAuth } from './AuthProvider';
export default function LoginScreen() {
const { user, signInGoogle, signOutGoogle } = useAuth();
if (user) {
return (
<View style={{ padding: 24 }}>
<Text style={{ fontSize: 18, fontWeight: '700' }}>
Welcome {user.displayName || user.id}
</Text>
<Pressable onPress={signOutGoogle} style={{ marginTop: 16 }}>
<Text>Sign out</Text>
</Pressable>
</View>
);
}
return (
<View style={{ padding: 24, gap: 12 }}>
{Platform.OS === 'ios' ? (
<Pressable onPress={() => signInGoogle({ androidButtonFlow: false })}>
<Text>Sign In with Google</Text>
</Pressable>
) : (
<>
<Pressable onPress={() => signInGoogle({ androidButtonFlow: true })}>
<Text>Sign In with Google (Button Flow)</Text>
</Pressable>
<Pressable onPress={() => signInGoogle({ androidButtonFlow: false })}>
<Text>Sign In with One-Tap</Text>
</Pressable>
</>
)}
</View>
);
}
6) Backend'de Token Doğrulama
idToken'ı doğrudan güvenip session açmayın. Backend'de doğrulayın.
import { OAuth2Client } from 'google-auth-library';
const client = new OAuth2Client();
export async function verifyGoogleIdToken(idToken: string, webClientId: string) {
const ticket = await client.verifyIdToken({
idToken,
audience: webClientId
});
const payload = ticket.getPayload();
if (!payload) throw new Error('Invalid token payload');
return {
googleSub: payload.sub,
email: payload.email,
emailVerified: payload.email_verified,
name: payload.name,
picture: payload.picture
};
}
7) Sık Hatalar
serverClientId is required
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID eksik..env uygulamaya yüklenmiyor.
Developer console is not set up correctly
- SHA-1 yanlış.
- Package name yanlış.
serverClientId olarak Web ID yerine Android/iOS ID verilmiş.
iosClientId is required for iOS
iosClientId yok.- Plugin ayarı yok.
- Native rebuild yapılmadı.
Sonuç
Bu kurulumla:
- Android ve iOS için tek auth akışı kurarsın.
- Kullanıcıyı local'de saklarsın.
- Güvenliği backend doğrulamasıyla tamamlarsın.
Üretime çıkmadan önce SHA-1, bundle ID ve consent screen ayarlarını tekrar kontrol et.
]]>
