###実現したいこと
Next.jsでアプリを作っており、認証にfirebase authのTwitterログインを使っています。ログイン後にユーザーのダッシュボードページに移動するようにしたいのですが、うまく行きません。
###試してみたこと
firebase.auth().onAuthStateChanged()
内部で画面遷移の処理を書いた。
next/router
ではなくwindow.location.href
で記述した。
いずれも変わりませんでした。
特にエラーは出ていません。元いたページのままログイン状態が変化します。
原因がわかるかたいらっしゃいましたらご教授頂けるとありがたいです。
###該当のコード
ログイン処理
js
1export function useAuthentication() { 2 const [currentUser, setCurrentUser] = useRecoilState(currentUserState); 3 4 const login = async () => { 5 const provider = new firebase.auth.TwitterAuthProvider(); 6 await firebase 7 .auth() 8 .signInWithPopup(provider) 9 .then(async userCredential => { 10 console.log(userCredential); 11 const { 12 id_str, 13 screen_name, 14 name, 15 profile_image_url, 16 } = userCredential.additionalUserInfo.profile; 17 18 const { accessToken, secret } = userCredential.credential; 19 20 const loginUser = { 21 uid: id_str, 22 userName: screen_name, 23 displayName: name, 24 profileImgUrl: profile_image_url, 25 }; 26 setCurrentUser(loginUser); 27 window.localStorage.setItem('user', JSON.stringify(loginUser)); 28 29 30 // ユーザー情報をDBに保存 31 await fetch('/api/users', { 32 method: 'POST', 33 headers: { 34 'Content-Type': 'application/json', 35 }, 36 body: JSON.stringify(loginUser), 37 }); 38 39 // フォロワー情報を取得してDBに保存 40 await fetch('/api/saveFriends', { 41 method: 'POST', 42 headers: { 43 'Content-Type': 'application/json', 44 }, 45 body: JSON.stringify({ 46 uid: id_str, 47 access_token_key: accessToken, 48 access_token_secret: secret, 49 }), 50 }); 51 52 await Router.push(`/users/${id_str}`); //遷移しない 53 }); 54 }; 55 56 const logout = () => { 57 firebase.auth().signOut(); 58 setCurrentUser(null); 59 window.localStorage.removeItem('user'); 60 Router.push('/'); 61 }; 62 63 64 return [login, logout]; 65} 66
呼び出し元
jsx
1<ListItem button onClick={login}>
あなたの回答
tips
プレビュー