実現したいこと
ここに実現したいことを箇条書きで書いてください。
スマートフォンのブラウザでgoogleアカウントによるfirebaseの認証を行いたいです。
前提
expoで、react native for webを使って開発しています。
googleアカウントでのログイン機能を作成しました。
pcのブラウザでログインした時はfirebaseのAuthentication→Usersで反映されますが、スマートフォンのブラウザでは反映されません。
該当のソースコード
firebaseConfig.js
// Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { GoogleAuthProvider, getAuth } from "firebase/auth"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyDLiEkgUE4WhNogs2UroNbmtwmuCl-dR0A", authDomain: "login-test-fade4.firebaseapp.com", projectId: "login-test-fade4", storageBucket: "login-test-fade4.appspot.com", messagingSenderId: "724578524182", appId: "1:724578524182:web:b1f332ec505267efbee937", measurementId: "G-W0VFPQR9EF", }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const auth = getAuth(app); const provider = new GoogleAuthProvider(); export { auth, provider, app };
login.js
import { provider, auth } from "./firebaseConfig"; import { signInWithRedirect } from "firebase/auth"; export const loginWithGoogle = () => { signInWithRedirect(auth, provider); };
App.tsx
import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, Pressable } from "react-native"; import { loginWithGoogle } from "./login"; export default function App() { return ( <View style={styles.container}> <Pressable onPress={loginWithGoogle}> <Text>ログイン</Text> </Pressable> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, });
試したこと
npx expo export:web
npx serve web-build
↓
表示されるurlからサイトを表示し、qrコードからスマホでアクセス。
ログインを実行
複数のアカウントでもログインを試みました。
補足情報(FW/ツールのバージョンなど)
Node 18.15.0
expo 49.0.8
firebase 10.3.1
react-native-web 0.19.8
0 コメント