CODEWITHSUNDEEP
javascriptreactjsgoogle-oauth
Dalton Kim
Dalton Kim

Reputation: 101

The new way of Google sign (popup mode) shows a blank white modal

This is my code i have set up the client ID correctly

once I click a button with id 'buttonDiv', a pop is shown, if no user account exists, i am asked to login, once i login, i have to choose the email to authenticate with, but i get a blank white space instead

import { Box, Button, Typography } from '@mui/material';
import Divider from 'components/Divider';

function handleCredentialResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
  }

function GoogleComponent({ action, isLoginPage }) {
  const classes = useStyles();

  window.onload = function () {
    window.google.accounts.id.initialize({
      client_id: process.env.REACT_APP_CLIENT_ID,
      callback: handleCredentialResponse,
      scope: 'email',
      ux_mode: 'popup',
    });
    window.google.accounts.id.renderButton(
      document.getElementById("buttonDiv"),
      { theme: "outline", size: "large" }  // customization attributes
    );
    window.google.accounts.id.prompt(); // also display the One Tap dialog
  }
 
    return (
      <Box className={classes.box}>
         <div id="buttonDiv"></div> 
      </Box>
    );
  }

  export default GoogleComponent;

when I change the ux_mode: 'redirect' it works but that's not how I want it.

I need a pop up to return a code and then use the code to make a post request to the backend API

I have added the http://localhost and http://localhost:3000 to the authorised domains on the cloud console.

what could I be missing?

Upvotes: 3

Views: 9665

Answers (3)

mahdi komaiha
mahdi komaiha

Reputation: 141

If you are using localhost

  • add http://localhost without port to your Google client key Authorized JavaScript origins
  • also add it including the port: for example http://localhost:9000

Upvotes: 4

gregoremm
gregoremm

Reputation: 39

You will need to set the HTTP Cross-Origin-Opener-Policy to same-origin-allow-popups. It is most likely set to same-origin right now.

Source: https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#cross_origin_opener_policy

Upvotes: 3

Simon Snowlock
Simon Snowlock

Reputation: 91

Try looking at the console of the blank popup window (right-click -> Inspect -> Console). It might offer some insights on the reason for its failure to render.

For example, I get "[GSI_LOGGER]: The given origin is not allowed for the given client ID". Your problem is probably something else because 'redirect' works for you (for me it fails with same error), but at least an error might point you in the right direction.

Upvotes: 5

Related Questions