Here is my simple authentication component LoginServiceProvider.tsx:
import { useState } from "react";
import {auth, googleProvider} from "../../config/firebase";
import "./Login.css";
import {saveUserType} from "../../service/profile-repository";
import {UserType} from "../../constants/UserType";
import {Link, useNavigate} from "react-router-dom";
const LoginServiceProvider = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const signIn = async () => {
try {
await signInWithEmailAndPassword(auth, email, password);
navigate('/');
} catch (error) {
console.log(error);
}
}
const signUpWithGoogle = async () => {
try {
const user: UserCredential = await signInWithPopup(auth, googleProvider);
await saveUserType(user.user.uid, UserType.SERVICE_PROVIDER)
navigate('/');
} catch (error) {
navigate('/error');
}
}
return (
<div className="container">
<div className="header">Service Provider Sign In</div>
<input
className="input"
placeholder="Email.."
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
className="input"
placeholder="Password.."
onChange={(e) => setPassword(e.target.value)}
/>
<button className="button" onClick={signIn}>Sign In</button>
<button className="button google-button" onClick={signUpWithGoogle}>Sign In With Google</button>
<p>Don't have an account? <Link to="/signup">Sign Up</Link></p>
</div>
)
}
export default LoginServiceProvider;
Here is my router configuration:
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { AuthProvider } from "./contexts/AuthContext";
import {Login} from "./views/authentication/Login";
import LoginServiceProvider from "./views/authentication/LoginServiceProvider";
import {LoginClient} from "./views/authentication/LoginClient";
import SignUp from "./views/authentication/SignUp/SignUp";
import SignUpServiceProvider from "./views/authentication/SignUp/SignUpServiceProvider";
import SignUpClient from "./views/authentication/SignUp/SignUpClient";
import ServiceProviderProfile from "./views/user/ServiceProviderProfile";
import OrderPage from "./views/order-page/OrderPage";
import ErrorPage from "./views/error/ErrorPage";
import ProfileForm from "./components/profile-form/ProfileForm";
import MyOrders from "./views/my-orders/MyOrders";
import Messages from "./views/messages/Messages";
import Navbar from "./components/navbar/Navbar";
import MyOrder from "./views/my-order/MyOrder";
import App from "./views/app/App";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<AuthProvider>
<Router>
<Navbar/>
<Routes>
<Route path="/" element={<App/>} />
<Route path="/login" element={<Login />} />
<Route path="/login-service-provider" element={<LoginServiceProvider />} />
<Route path="/login-client" element={<LoginClient />} />
<Route path="/signup" element={<SignUp />} />
<Route path="/signup-service-provider" element={<SignUpServiceProvider />} />
<Route path="/signup-client" element={<SignUpClient />} />
<Route path="/profile/serviceProvider/:id" element={<ServiceProviderProfile />} />
<Route path="/profile/client" element={<ProfileForm />} />
<Route path="/messages" element={<Messages />} />
<Route path = "/my-orders" element={<MyOrders/>} />
<Route path = "/my-orders/:orderId" element={<MyOrder/>} />
<Route path="/new-order/:orderName" element={<OrderPage />} />
<Route path="/error" element={<ErrorPage />} />
<Route path="*" element={<ErrorPage />} />
</Routes>
</Router>
</AuthProvider>
</React.StrictMode>
);
reportWebVitals();
Here is AuthContext:
import { auth } from "../config/firebase";
import {getUserType} from "../service/profile-repository";
import {UserType} from "../constants/UserType";
import {SocketProvider} from "./SocketContext";
export interface CurrentUser {
firebaseUser: any|null,
loading: boolean,
userType: string | null,
}
const AuthContext = createContext<any>(undefined)
export const useAuth = () => useContext(AuthContext);
export const AuthProvider = ({ children } : any) => {
const [firebaseUser, setFirebaseUser] = useState<any>(null)
const [loading, setLoading] = useState<boolean>(true)
const [userType, setUserType] = useState<string|null>(null)
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(async fbUser => {
setFirebaseUser(fbUser)
if(fbUser) {
const user = await getUserType(fbUser.uid)
if(user){
setUserType(user.userType)
} else {
setUserType(null)
}
}
setLoading(false)
})
return unsubscribe
}, [])
const value: CurrentUser = {
firebaseUser: firebaseUser,
loading: loading,
userType: userType,
}
return (
<AuthContext.Provider value={value}>
{firebaseUser ? (
<SocketProvider>
{children}
</SocketProvider>
) : children}
</AuthContext.Provider>
)
}
And finally, when I navigate to “/” I just want to load App component once I have successfully logged in:
const App = () => {
console.log('Inside app');
return (
<div>
<h1>App Component</h1>
</div>
);
};
export default App;
So when I log in with google account, I call the navigate, the path in URL changes to “/”, however the App component is not loaded, the login window stays as it is (find the attached screenshots). Any suggestions, feedback will be highly appreciated. Thank you very much for your attention.
