Make login functionalities for google authentication

[Arafatmollik1]

You can follow this tutorial. https://www.youtube.com/watch?v=S_sV6bYWKXQ

Build functionalities to login with google auth. When authentication is successful, callback should be in this route "/login-validation" So, make a login-validation route where basic validation will happen and user's information will be stored into the database.

After that user will be logged in and be moved to "/home" page. In the home page you can just console log user has logged in.

[AR-Aourangazeb-Alif]

1. How can I access the firebase project dashboard so that I can manage providers?

2. Can you please elaborate the "/login-validation" route? What kind of validation should happen and what information they should provide?

3. Is there any design I shall follow while making the "login-validation" route?

[Arafatmollik1]

@AR-Aourangazeb-Alif Added you as collaborator in the project.

For the "/login-validation" route. This route will not have any view. For example, when the user authenticates in google and comes back to our application. The user will come back to "login-validation" route. The route has no view. Only job of this route is that it will validate the user information and then save the info to database and then redirect to "/home".

Here is an example from chatgpt

// pages/login.js
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { auth } from '../lib/firebase';

const Login = () => {
  const router = useRouter();

  const handleLogin = async () => {
    const provider = new GoogleAuthProvider();
    try {
      const result = await signInWithPopup(auth, provider);
      const idToken = await result.user.getIdToken();

      // Send ID token to the server for validation and redirection
      const response = await fetch('/api/login-validation', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ idToken }),
      });

      if (response.ok) {
        router.push('/home');
      } else {
        console.error('Failed to validate and redirect');
      }
    } catch (error) {
      console.error('Error during login:', error);
    }
  };

  useEffect(() => {
    handleLogin();
  }, []);

  return <div>Loading...</div>;
};

export default Login;

[AR-Aourangazeb-Alif]

For clarification, after authentication, an idToken will be sent to the backend where the token will be validated and send a response to the clientside. Meanwhile, the system will redirect to the "/login-validation" route, which is a blank page without any UI and will stay there until it gets the response from backend. If the validation is successful, the system will redirect to the "/home" page or else the system will log-out the user. This is it, right? Am I missing something?

[Arafatmollik1]

@AR-Aourangazeb-Alif Yes you are right! Just one thing, I prefer if validation fails then redirect to "login" page and show an error text. "Failed to log in".

This is more user friendly then redirecting user to logout route

[AR-Aourangazeb-Alif]

For ID Token verification, I need Firebase-Admin SDK. Can you please provide me with Firebase-Admin SDK in private?