Apologies...as a Python developer, I am currently working on incorporating a Google OAuth flow into a react/TypeScript frontend. I have been referencing examples from the react-oauth documentation for guidance. My goal is to dynamically generate a unique state token that will be passed to useGoogleLogin when the user clicks the login button.
const googleLogin = useGoogleLogin({
ux_mode: "redirect",
state: "token", // <= I aim to set this value dynamically upon clicking the login button
redirect_uri: "http://localhost:3000/auth/google/callback/",
flow: "auth-code",
scope: "https://www.googleapis.com/auth/drive.readonly",
onSuccess: (codeResponse) => console.log('Login successful so far'),
onError: (error) => console.log('Login Failed:', error)
});
To call this function on the page, it can be done as follows:
<button onClick={() => googleLogin()}>Sign in with Google 🚀</button>I am struggling to find a solution due to the limitations of using hooks and how to integrate the required logic within useGoogleLogin. However, I believe achieving this should not be too difficult. I have a method available that can request a state token from the backend and can be invoked like this:
const token = await api.user.getStateToken()For comparing purposes, here's how I handle LinkedIn login, which involves manually triggering the OAuth redirect but is straightforward enough to provide insights into what I am trying to achieve.
const onLoginLinkedIn = async () => {
// Require the backend request for a state token to complete before proceeding.
// The state token is utilized to confirm that the subsequent callback from LinkedIn correlates to this specific call
const token = await api.user.getStateToken()
await router.push(`https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${client_id}&redirect_uri=${encodeURIComponent(callback_uri)}&state=${token}&scope=r_basicprofile%20r_emailaddress%20w_member_social`)
}
This function is triggered on the page like so:
<img src="./linkedin/Sign-in-Large---Default.png" alt={"Login LinkedIn"} onClick={onLoginLinkedIn}/>Is there a way to develop something similar to this setup, but utilizing useGoogleLogin instead of router.push?