React JS App with Google Authentication. Hide Google Login button button on authentication

Question

I am new to React, and want to use Google Authentication. I am hiding my UI until the users is authenticated. Up to now the App is working as expected. My issue is when the user authenticates and the UI shows the Google Login button still shows. I would like it not to show, if the user does a hard refresh the button will go away.

Current code:

  useEffect(() => {
    // Check if the user is already authenticated from storage
    window.onload = () => {
      const storedUser = JSON.parse(localStorage.getItem('user'));
      if (storedUser) {
        setUser(storedUser);
      } else {
        // Initialize Google Sign-In only if not already authenticated
        const signInOptions = {
          client_id: '',
        };

        google.accounts.id.initialize({
          client_id: signInOptions.client_id,
          callback: handleSignIn,
        });

        // Render the Google Sign-In button
        google.accounts.id.renderButton(document.getElementById('g_id_onload'), {
          theme: 'filled_blue',
          size: 'large',
          shape: 'pill',
          text: 'signin_with',
          logo_alignment: 'left',
          ux_mode: 'popup',
          context: 'signin',
        });
      }
      
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);

  return (
    <div className="app">
      {user ? (
        // Show UI only if the user is authenticated
        <>
          <div className="header">
            <div className="logo-container">
              {/* Add your logo image here */}
              <img src="/logo.png" alt="Logo" className="logo" />
            </div>
            <div className="title">Special Consideration Attempt Lookup</div>
          </div>
          <div className="input-container">
            <div className="input-box">
              <label htmlFor="studentId">Student ID</label>
              <input type="text" id="studentId" value={studentId} onChange={handleStudentIdChange} />
              <span className="required-asterisk">*</span>
            </div>

            <div className="input-box">
              <label htmlFor="unitCode">Unit Code</label>
              <input type="text" id="unitCode" value={unitCode} onChange={handleUnitCodeChange} />
            </div>

            <div className="input-box">
              <label htmlFor="examYear">Exam Year</label>
              <input
                type="number"
                id="examYear"
                value={examYear}
                onChange={handleExamYearChange}
              />
              <span className="required-asterisk">*</span>
            </div>

            <button className="search-button" onClick={handleSearchClick}>
              Search
            </button>

            <button className="clear-button" onClick={handleClearClick}>
              Clear
            </button>
          </div>
          {loading && (
            <div className="loading-spinner-overlay">
              <div className="loading-spinner"></div>
            </div>
          )}
          <div
            className="ag-theme-alpine"
            style={{
              height: '400px',
              width: '100%',
              marginTop: '20px',
            }}
          >
            <AgGridReact
              columnDefs={columnDefs}
              rowData={rowData}
              onGridReady={(params) => {
                gridRef.current = params.api;
              }}
            />
          </div>
        </>
        ) : null}
    <div
      id="g_id_onload"
      data-client_id=""
      data-context="signin"
      data-ux_mode="popup"
    >
      <div
        className="g_id_signin"
        data-type="standard"
        data-shape="pill"
        data-theme="filled_blue"
        data-text="signin_with"
        data-size="large"
        data-logo_alignment="left"
      ></div>
    </div>
  </div>
);

}

Answer 1

I think you just need to change ternary.

In JSX, the ternary pattern works as follows

<div>
{  condition ? (
      stuff if true
   ) : (
      struff if false
   )
}
</div>

Here is a super-simple stripped down mock of a login ternary:

function App(props) {
  const [user, setUser] = React.useState(false)
  return (
    <div className='App'>
      {user ? (
        <div onClick={() => setUser(false)}>
           You are now logged in (click to log out)
        </div>
      ) : (
        <input type="button" onClick={() => setUser(true)} value="Login" />
      )}
    </div>
  );
}

ReactDOM.render(
    <App title="I'm the thingy" />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

In your particular case replacing ) : null} and below with the following should solve the problem:

  ) : (
    <div
      id="g_id_onload"
      data-client_id=""
      data-context="signin"
      data-ux_mode="popup"
    >
      <div
        className="g_id_signin"
        data-type="standard"
        data-shape="pill"
        data-theme="filled_blue"
        data-text="signin_with"
        data-size="large"
        data-logo_alignment="left"
      ></div>
    </div> )}
  </div>
);
}

Alternatively you could wrap the Login stuff in it's own ternary as well.

Answer 2

Hide the Login button when the user isn't authenticated by using this format

user ? ( 

  UI
) : (
  Login button
)

return (
  <div className="app">
      {user ? (
        // Show UI only if the user is authenticated
        <>
          <div className="header">
            <div className="logo-container">
              {/* Add your logo image here */}
              <img src="/logo.png" alt="Logo" className="logo" />
            </div>
            <div className="title">Special Consideration Attempt Lookup</div>
          </div>
          <div className="input-container">
            <div className="input-box">
              <label htmlFor="studentId">Student ID</label>
              <input type="text" id="studentId" value={studentId} onChange={handleStudentIdChange} />
              <span className="required-asterisk">*</span>
            </div>

            <div className="input-box">
              <label htmlFor="unitCode">Unit Code</label>
              <input type="text" id="unitCode" value={unitCode} onChange={handleUnitCodeChange} />
            </div>

            <div className="input-box">
              <label htmlFor="examYear">Exam Year</label>
              <input
                type="number"
                id="examYear"
                value={examYear}
                onChange={handleExamYearChange}
              />
              <span className="required-asterisk">*</span>
            </div>

            <button className="search-button" onClick={handleSearchClick}>
              Search
            </button>

            <button className="clear-button" onClick={handleClearClick}>
              Clear
            </button>
          </div>
          {loading && (
            <div className="loading-spinner-overlay">
              <div className="loading-spinner"></div>
            </div>
          )}
          <div
            className="ag-theme-alpine"
            style={{
              height: '400px',
              width: '100%',
              marginTop: '20px',
            }}
          >
            <AgGridReact
              columnDefs={columnDefs}
              rowData={rowData}
              onGridReady={(params) => {
                gridRef.current = params.api;
              }}
            />
          </div>
        </>
        ) : (
 

        <div
          id="g_id_onload"
          data-client_id=""
          data-context="signin"
          data-ux_mode="popup"
        >
          <div
            className="g_id_signin"
            data-type="standard"
            data-shape="pill"
            data-theme="filled_blue"
            data-text="signin_with"
            data-size="large"
            data-logo_alignment="left"
          ></div>
       </div>

)}
   
  </div>

);