What's new

Help Google Authentication React JS

Toji_phc

Eternal Poster
Established
Joined
Aug 24, 2017
Posts
883
Reaction
1,510
Points
462
Age
21
Hello, sino po may alam kung pano makapunta sa homepage ng app after successful sign in using google
 
Ano ba nalabas paps after login?
Screenshot_2023-03-02-20-11-29-17_99c04817c0de5652397fc8b56c3b3817.jpg


heto po, di sya nakakabalik ng home screen
 

Attachments

To redirect a user to the homepage of your React app after a successful sign-in using Google, you can use the history object from React Router.

Assuming you have installed React Router and have set up your routes in your app, you can use the history.push() method to redirect the user to the homepage.

Here's an example code snippet:

JSX:
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { signInWithGoogle } from "./firebase/auth"; // import your Google sign-in function

function SignInPage() {
  const [loading, setLoading] = useState(false);
  const history = useHistory(); // get the history object from React Router

  const handleSignInWithGoogle = async () => {
    setLoading(true);
    try {
      await signInWithGoogle(); // call your Google sign-in function
      setLoading(false);
      history.push("/"); // redirect to the homepage
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };

  return (
    <div>
      <button onClick={handleSignInWithGoogle} disabled={loading}>
        Sign in with Google
      </button>
    </div>
  );
}

export default SignInPage;

In this example, we first import the useHistory hook from React Router. Then, we define a handleSignInWithGoogle function that calls our Google sign-in function and, upon successful authentication, redirects the user to the homepage using history.push("/").

Note that this assumes you have set up your React Router routes correctly, with a homepage route that has a path of "/". If your homepage route has a different path, replace "/" with your homepage route path in the history.push() method.
 

Similar threads

Back
Top