Set up Google Auth Library

[nicmart-dev]

Integrate Google Authentication into a React application using the @react-oauth/google package.

Prerequisite: you need to set up OAuth 2.0 authentication using the Google Auth Library in your React application, using OAuth 2.0 credentials (Client ID and Client Secret) set up in #15. This will allow users to sign in with their Google accounts.

[nicmart-dev]

Prerequisite: #15

1. Install Google Auth Library In your React project, install the google-auth-library and other necessary dependencies:

npm install google-auth-library @react-oauth/google

2. Configure OAuth in React Set up Google OAuth in your React application. Use the @react-oauth/google package to handle authentication.

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

const App = () => {
  return (
    <GoogleOAuthProvider clientId="YOUR_CLIENT_ID">
      <Login />
    </GoogleOAuthProvider>
  );
};

const Login = () => {
  const login = useGoogleLogin({
    onSuccess: tokenResponse => {
      // Handle successful login
      console.log(tokenResponse);
    },
    onFailure: error => {
      // Handle login failure
      console.log(error);
    },
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });

  return (
    <button onClick={() => login()}>Sign in with Google</button>
  );
};

export default App;

[nicmart-dev]

Design doc: https://github.com/nicmart-dev/linguistnow/wiki/Google-Authentication