Skip to main content
Journal Index
3/14/2024

Integrations With Google Auth

Tanuj Pandey - Lead Architect

Tanuj Pandey

Lead Architect

Integrations With Google Auth

Go to Google Cloud Console:

  • Visit the Google Cloud Console website and sign in with your Google account.


Create a Project:

  • Click on the "Create Project" button and give your project a name, such as "React Frontend."


Article content illustration

Create OAuth Credentials:


Navigate to the "APIs & Services" > "Credentials" section.

  • Click on "Create Credentials" and select "OAuth client ID."

Choose the application type as "Web application."

Article content illustration

Configure Consent Screen:


Set up the OAuth consent screen by providing details such as the application name and developer contact information.Choose "External" for the user type and click "Create."

Article content illustration


Create OAuth Client ID:

Article content illustration






Go back to the "Credentials" tab and click on "Create Credentials" > "OAuth client ID" again.

  • Select "Web application" and enter the authorized redirect URIs (e.g., http://localhost:3000/auth/google/callback).
  • Click "Create" to generate the OAuth client ID and client secret.


    Set Up Environment Variables:
  • Create a .env file in your project directory and add the OAuth client ID and client secret as environment variables.


    Integrate Google Login:
  • Use a library like react-google-login to implement Google authentication in your React application.
  • Configure the library with the OAuth client ID and set up the login button to trigger the authentication process.

    Test the Integration:
  • After integrating Google login, test the authentication flow by clicking on the login button and verifying that users can sign in with their Google accounts successfully.