Auth with Google Provider error

Answered

Atlantic mackerel posted this in #help-forum

Atlantic mackerelOP

2024-02-11T15:46:15.000Z

Hey guys, Im trying to add google provider to my application but it doesn't work
I can select my google accounts but after selected, the error has occurred.
Why This error has occurred?

I tried this

  <GoogleOAuthProvider clientId="secret">
            <div className="w-[120px]">
                <GoogleLogin type="icon" onSuccess={responseMessage} onError={errorMessage}/>
            </div>
</GoogleOAuthProvider>

Also I did this (seocnd photo)

Answered by Atlantic mackerel

OH I fixed it myself! thank you sorry for late

View full answer

87 Replies

Jesse

2024-02-11T15:49:27.000Z

Remvove /home from the approved redirect URI so it's just http://localhost:8888

Also click on check and see what comes up

@Jesse Also click on `check` and see what comes up

Atlantic mackerelOP

2024-02-11T15:50:54.000Z

like this?

Jesse

2024-02-11T15:51:57.000Z

Yep but have two on Approved JavaScript Source and Approved Redirect URI.
The two you should have on each are http://localhost and http://localhost:8888

Atlantic mackerelOP

2024-02-11T15:52:24.000Z

ahhh then I have to add http://localhost

I added this but the after click page just show the same

Jesse

2024-02-11T15:54:31.000Z

like this.

Atlantic mackerelOP

2024-02-11T15:54:47.000Z

ahhh both are same

@Jesse like this.

Atlantic mackerelOP

2024-02-11T15:56:59.000Z

Oh login work perfectly!! but
thenn did you know how to get that user information programmatically?

Jesse

2024-02-11T15:57:26.000Z

yes, but it depends what data you're getting

do you have a custom sign up button

actually nvm

I can see from your code

@Jesse do you have a custom sign up button

Atlantic mackerelOP

2024-02-11T15:58:12.000Z

Yep I have this

import {GoogleLogin, GoogleOAuthProvider} from "@react-oauth/google";

    const responseMessage = (response) => {
        console.log(response);
    };
    const errorMessage = () => {

    };
                <GoogleLogin type="icon" onSuccess={responseMessage} onError={errorMessage}/>

Jesse

2024-02-11T15:58:26.000Z

I remember having to do this let me have a look at my code.

Atlantic mackerelOP

2024-02-11T15:58:37.000Z

ahhh you did the same thing before me haha

Jesse

2024-02-11T16:02:38.000Z

what are you getting in response

Atlantic mackerelOP

2024-02-11T16:03:36.000Z

This is response object

Jesse

2024-02-11T16:04:29.000Z

This should work.

const res = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", {
  headers: { Authorization: `Bearer ${response.credential}` },
});
const data = await res.json();

const responseMessage = async (response) => {
  const res = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", {
    headers: { Authorization: `Bearer ${response.credential}` },
  });
  const data = await res.json();
};

Atlantic mackerelOP

2024-02-11T16:05:47.000Z

it returned this error

GET https://www.googleapis.com/oauth2/v2/userinfo 401 (Unauthorized)

Jesse

2024-02-11T16:06:13.000Z

Okay wait a sec, lemme find it

Atlantic mackerelOP

2024-02-11T16:07:06.000Z

as I remember, I didn't put any client_scret key

ANd I guess it's gonna make problem

Jesse

2024-02-11T16:14:05.000Z

import{ OAuth2Client } from "google-auth-library";
const client = new OAuth2Client(
  "Your client ID",
);
const responseMessage = async (response) => {
  const ticket = (
      await client.verifyIdToken({
        idToken: response.credential,
        audience:
          "Your client ID",
      })
   ).getPayload();
  console.log(ticket)
};

This should work

Atlantic mackerelOP

2024-02-11T16:14:41.000Z

ahh I'll try it

I tried this:

import {User} from "../types/user";
import {GoogleLogin, GoogleOAuthProvider} from "@react-oauth/google";
import{ OAuth2Client } from "google-auth-library";

const client = new OAuth2Client(
    "secret",
);
const Home = () => {
    const responseMessage = async (response) => {
        const ticket = (
            await client.verifyIdToken({
                idToken: response.credential,
                audience:
                    "Your client ID",
            })
        ).getPayload();
        console.log(ticket)
    };
    const errorMessage = () => {

    };

    return (
        <GoogleOAuthProvider clientId="919611793952-7muej33mh7touelci048cbjmingtko01.apps.googleusercontent.com" >
            <div className="w-[120px]">
                <GoogleLogin type="icon" onSuccess={responseMessage} onError={errorMessage}/>
            </div>
        </GoogleOAuthProvider>
    );
};

export default Home;

but the error said:

../node_modules/gcp-metadata/build/src/gcp-residency.js:19:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/gcp-metadata/build/src/index.js
../node_modules/google-auth-library/build/src/index.js
./pages/home.tsx

I didn't had this google-auth-library libs so I download it via npm i google-auth-library

Jesse

2024-02-11T16:18:56.000Z

Run this in your server instead

Are you familiar with Next backend

@Jesse Are you familiar with Next backend

Atlantic mackerelOP

2024-02-11T16:19:45.000Z

oh actually my backend is electron I use with nextron

Jesse

2024-02-11T16:19:52.000Z

okay nvm

let me find another solution

Atlantic mackerelOP

2024-02-11T16:20:10.000Z

yap

Jesse

2024-02-11T16:21:52.000Z

Use that component

convert it to jsx if needed

then replace your div with that

@Jesse js const responseMessage = async (response) => { const res = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", { headers: { Authorization: `Bearer ${response.credential}` }, }); const data = await res.json(); };

Jesse

2024-02-11T16:22:25.000Z

And then use this again

Atlantic mackerelOP

2024-02-11T16:22:28.000Z

ahh got it

Jesse

2024-02-11T16:22:29.000Z

and it will work

Atlantic mackerelOP

2024-02-11T16:24:40.000Z

I tried to add responseMessage but the error has occurred as you can see

Jesse

2024-02-11T16:25:56.000Z

oh I see

you're gonna have to edit the GoogleButton slightly

Atlantic mackerelOP

2024-02-11T16:26:32.000Z

ahhh got it like add parameter?

Jesse

2024-02-11T16:26:54.000Z

wait a sec let me check you might have to edit responseMessage

Atlantic mackerelOP

2024-02-11T16:27:21.000Z

I just did this

    const responseMessage = async (response) => {
        const res = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", {
            headers: { Authorization: `Bearer ${response.credential}` },
        });
        const data = await res.json();
    };
    const errorMessage = () => {

    };

    return (
        <GoogleOAuthProvider clientId="" >
            <div className="w-[120px]">
                <GoogleButton googleFunction={responseMessage} text={"Sign in with Google"}></GoogleButton>
            </div>
        </GoogleOAuthProvider>
    );

Jesse

2024-02-11T16:27:52.000Z

that won't work this is the new code you'll need

Atlantic mackerelOP

2024-02-11T16:28:06.000Z

ahhhh got it

Jesse

2024-02-11T16:28:46.000Z

Create this function where your response message is.

const login = useGoogleLogin({
    onSuccess: (codeResponse) => responseMessage(codeResponse.access_token),
  });

then pass it as googleFunction

Also import this.

import { useGoogleLogin } from "@react-oauth/google";

Atlantic mackerelOP

2024-02-11T16:29:43.000Z

ahhh like this?

import {GoogleOAuthProvider, useGoogleLogin} from "@react-oauth/google";
import GoogleButton from "../components/google-button";



const Home = () => {
    const responseMessage = async (response) => {
        const login = useGoogleLogin({
            onSuccess: (codeResponse) => responseMessage(codeResponse.access_token),
        });
    };
    const errorMessage = () => {

    };

    return (
        <GoogleOAuthProvider clientId="" >
            <div className="w-[120px]">
                <GoogleButton googleFunction={responseMessage} text={"Sign in with Google"}></GoogleButton>
            </div>
        </GoogleOAuthProvider>
    );
};

export default Home;

I just got this errorrrr..

Jesse

2024-02-11T16:31:28.000Z

put the login outside the responseMessage

Atlantic mackerelOP

2024-02-11T16:32:11.000Z

like this?

import {GoogleOAuthProvider, useGoogleLogin} from "@react-oauth/google";
import GoogleButton from "../components/google-button";

const Home = () => {

    const login = useGoogleLogin({
        onSuccess: (codeResponse) => responseMessage(codeResponse.access_token),
    });

    const responseMessage = async (response) => {


    };
    const errorMessage = () => {

    };

    return (
        <GoogleOAuthProvider clientId="">
            <div className="w-[120px]">
                <GoogleButton googleFunction={() => {


                }} text={"Sign in with Google"}></GoogleButton>
            </div>
        </GoogleOAuthProvider>
    );
};

export default Home;

Jesse

2024-02-11T16:32:18.000Z

Also change.

googleFunction={responseMessage}

To.

googleFunction={login}

Atlantic mackerelOP

2024-02-11T16:32:58.000Z

Jesse

2024-02-11T16:33:01.000Z

And then set your response message function to.

const responseMessage = async (response) => {
  const res = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", {
    headers: { Authorization: `Bearer ${response.credential}` },
  });
  const data = await res.json();
};

Atlantic mackerelOP

2024-02-11T16:33:15.000Z

I guess the login and main page should be separated file

Jesse

2024-02-11T16:33:40.000Z

Also make the GoogleOAuthProvider wrap where the component is rendered instead of wrapping it in the component

Atlantic mackerelOP

2024-02-11T16:35:12.000Z

ahhh so it couldn't be in same file

@Jesse Also make the GoogleOAuthProvider wrap where the component is rendered instead of wrapping it in the component

Atlantic mackerelOP

2024-02-11T16:38:14.000Z

I just edit the google-button

const GoogleButton = ({
                          googleFunction,
                          text = "Sign in with Google",
                      }: {
    googleFunction: () => any;
    text?: string;
}) => {

    const login = useGoogleLogin({
        onSuccess: (codeResponse) => responseMessage(codeResponse.access_token),
    });

    const responseMessage = async (response) => {
        const res = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", {
            headers: { Authorization: `Bearer ${response.credential}` },
        });
        const data = await res.json();
    };



    return (
    <button
                type="button"
                onClick={() => login}
                className="loginWithGoogleBtn"
            >
                {text}
            </button>

  )
}