CODEWITHSUNDEEP
reactjsnext.jsgoogle-oauth
like who
like who

Reputation: 121

Google OAuth components must be used within GoogleOAuthProvider

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 : enter image description here

enter image description here

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

Upvotes: 5

Views: 10312

Answers (6)

Anhad
Anhad

Reputation: 111

In my case I used useGoogleLogin wrapped with <GoogleOAuthProvider/> in pages directly, I made a component along with other components for GoogleLoginButton to fix this issue and it worked!

Upvotes: 0

Nehal Shrivashtava
Nehal Shrivashtava

Reputation: 31

No Need to wrap the whole application inside GoogleOAuthenProvider

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


const MyCustomComponent = () => {
  //a button componet
  const GoogleLoginButton = () => {
    const handleGoogleAuth = useGoogleLogin({
      onSuccess: (codeResponse) => {
        console.log(codeResponse);
      },
      onError: () => console.log("Login Failed"),
      flow: "auth-code",
    });

    return (
      <Button onClick={() => handleGoogleAuth()}>Sign in with Google 🚀</Button>
    );
  };

  return (
    <GoogleOAuthProvider clientId="<YOUR_CLIENT_ID>">
      <GoogleLoginButton />
    </GoogleOAuthProvider>
  );
};

Upvotes: 0

tdvr
tdvr

Reputation: 21

The GoogleOAuthenProvider is supposed to wrap your whole application I guess, as the creator of the package does it. You won't have these errors again.

So, include it to your index.js file

import { GoogleOAuthProvider } from '@react-oauth/google';
....
root.render(
  <React.StrictMode>
    <GoogleOAuthProvider clientId="304531247476-58f940f3b0dgrupg95cdo8b51fspupdv.apps.googleusercontent.com">
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </GoogleOAuthProvider>
  </React.StrictMode>,
);

Similarly, if you were to follow Google's documentation, you would have to include the below code to your in public/index.html

<script src="https://accounts.google.com/gsi/client" async></script>

Upvotes: 0

sushmitha
sushmitha

Reputation: 51

I was facing the same error because I was using a custom google login button. It got resolved once I wrapped the the whole app component inside GoogleOAuthProvider component instead of wrapping just the custom button component.

\\ App.js

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

<GoogleOAuthProvider clientId="YOURCLIENT_ID">
    <App/>
</GoogleOAuthProvider>;

Upvotes: 0

hhelsinki
hhelsinki

Reputation: 84

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.

Upvotes: 6

localhost_3000
localhost_3000

Reputation: 196

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>;

Upvotes: 0

Related Questions