added firebase redirect authentication

src/App.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@mui/material/styles";
 import { Switch, Route, Router, Redirect } from "wouter";
 import { darkTheme } from "./components/app/mui-styles";
 import { useAppDispatch } from "./state";
-import { loadUser } from "./state/user";
+import { loadUser, login } from "./state/user";
 import AuthMain from "./features/auth/AuthMain";
 import P2PCallMain from "./features/p2p-call/P2PCallMain";
 import CallCreationMain from "./features/call-selection/CallCreationMain";
@@ -15,6 +15,7 @@ export default function App() {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
+    dispatch(login());
     dispatch(loadUser());
   }, [dispatch]);
 

src/features/auth/AuthMain.tsx

@@ -3,16 +3,13 @@ import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import GoogleIcon from "@mui/icons-material/Google";
 import HomeTemplate from "../../components/templates/HomeTemplate";
-import { useAppDispatch, useAppSelector } from "../../state";
-import { login, selectIsUserPendingAuthentication } from "../../state/user";
+import { useAppSelector } from "../../state";
+import { selectIsUserPendingAuthentication } from "../../state/user";
+import firestoreAuth from "../../services/firestore-auth";
 
 export default function AuthMain() {
-  const dispatch = useAppDispatch();
-
-  const handleLoginClick = () => dispatch(login());
-
+  const handleLoginClick = () => firestoreAuth.redirectLogin();
   const isPending = useAppSelector(selectIsUserPendingAuthentication);
-
   return (
     <HomeTemplate>
       <Typography

src/services/firestore-auth.ts

@@ -1,10 +1,11 @@
 import once from "lodash.once";
-import type { User as FirebaseUser } from "firebase/auth";
+import type { User as FirebaseUser, UserCredential } from "firebase/auth";
 import {
   browserLocalPersistence,
   getAuth,
+  getRedirectResult,
   setPersistence,
-  signInWithPopup,
+  signInWithRedirect,
   signOut,
 } from "firebase/auth";
 import { googleAuthProvider } from "./firestore-connection";
@@ -13,6 +14,7 @@ import type { User } from "../webrtc";
 const firestoreAuth = {
   loadUser,
   login,
+  redirectLogin,
   logout,
 };
 
@@ -44,21 +46,28 @@ async function loadUser(): Promise<User> {
   });
 }
 
-async function login(): Promise<User> {
+async function redirectLogin(): Promise<never> {
   const auth = getAuth();
 
   await setPersistence(auth, browserLocalPersistence);
+  return signInWithRedirect(auth, googleAuthProvider);
+}
 
-  const result = await signInWithPopup(auth, googleAuthProvider);
+async function login(): Promise<User> {
+  const empty: User = { uid: "", displayName: "", email: "" };
+  const auth = getAuth();
+  const result = await getRedirectResult(auth);
+  console.log(result);
+  if (result === null) {
+    Promise.resolve(empty);
+  }
   const {
     user: { uid, displayName, email },
-  } = result;
-
+  } = result as UserCredential;
   if (!email) {
     signOut(auth);
     throw new Error("Login blocked: unidentified user.");
   }
-
   return {
     uid,
     displayName: displayName ?? email,