Question

I want to build my next js project in which i am using https://www.npmjs.com/package/@react-oauth/google but when I build it i get the following :

this is layout.js and in _app.js I have all the components wrapped in GoogleOAuthProvider

import { GoogleLogin } from  @react-oauth/google ;
import {FcGoogle} from "react-icons/Fc"
import { useGoogleLogin } from  @react-oauth/google ;
export default function Layout({ children }) {
    const client_id = ""
    const responseGoogle = (response) => {
        console.log(response);
    }
CUTTED (NOT RELEVANT)
    const login = useGoogleLogin({
        onSuccess: codeResponse => {

            const { code } = codeResponse;
            console.log(codeResponse)
            axios.post("http://localhost:8080/api/create-tokens", {  code }).then(response => {
                const { res, tokens } = response.data;
                const refresh_token = tokens["refresh_token"];
                const db = getFirestore(app)
                updateDoc(doc(db,  links , handle), {
                    refresh_token : refresh_token
                })
                updateDoc(doc(db,  users , useruid), {
                    refresh_token : refresh_token
                }).then(
CUTTED (NOT RELEVANT)
                )
            }).catch(err => {
                console.log(err.message);

            })
        },
        onError: errorResponse => console.log(errorResponse),
        flow: "auth-code",
        scope: "https://www.googleapis.com/auth/calendar"
    });
    return (
        <>
CUTTED (NOT RELEVANT)

        </>
    )
}

Everything works perfect in dev mode but it does not want to build

Answer 1

I ve faced this issue too. So I use GoogleLogin instead of useGoogleLogin , then you can custom POST method on onSuccess property.

    import { GoogleLogin, GoogleOAuthenProvider} from  @react-oauth/google ;
    import jwtDecode from  jwt-decode ;

    return(
        <GoogleOAuthProvider clientId="YOUR CLIENT ID">
            <GoogleLogin
                onSuccess={handleLogin}
            />
        </GoogleOAuthProvider>

The async function will be like...

    const handleLogin = async (credentialResponse) => {
        var obj = jwtDecode(credentialResponse.credential);
        var data = JSON.stringify(obj);
        console.log(data);

        const data = {your data to send to server};

        const config = {
          method:  POST ,
          url:  your backend server or endpoint ,
          headers: {},
          data: data
        }

      await axios(config)
    }

Spending whole day, this solve me out. Just want to share.

Answer 2

You have to wrap your application within GoogleOAuthProvider component. Please keep in mind that you will need your client ID for this.

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

<GoogleOAuthProvider clientId="<your_client_id>">
    <SomeComponent />
    ...
    <GoogleLoginButton onClick={handleGoogleLogin}/>
</GoogleOAuthProvider>;

友情链接