reactjsexpressoauthgoogle-oauthsign-in-with-google

How to get refresh token for "Sign In With Google"


I have been trying to create a refresh token since the access token keep on expiring in 1hr.

 window.onload = function () {
    google.accounts.id.initialize({
      client_id: ,
      callback: handleCredentialResponse,
    });

    google.accounts.id.renderButton(
      document.getElementById("google-signin-button"),
      { theme: "outline", size: "large", shape: "circle" } // customization attributes
    );
    google.accounts.id.prompt(); // also display the One Tap dialog
  };

In this doc from google nothing is mentioned about create a refresh token. https://developers.google.com/identity/gsi/web/guides/overview

Anyone help me out thanks.


Solution

  • Might help someone, if you need refresh_token then you need Authorization, not Authentication. Make a server-side call, that is, use the googleapis lib serverside, load it with the appropriate credentials

    import { google } from 'googleapis';
    const oauth2Client = new google.auth.OAuth2(
            process.env.GOOGLE_CLIENT_ID,
            process.env.GOOGLE_CLIENT_SECRET,
            process.env.GOOGLE_REDIRECT_URL // Ensure this is set correctly in your .env file
        );
    
    
    // Generate a secure random state value for CSRF protection
        const state = crypto.randomBytes(32).toString('hex');
    
        // Store state in cookies securely (for CSRF protection)
        cookies().set('oauth_state', state, {
            httpOnly: true,
            secure: process.env.NODE_ENV === 'production',
        });
    

    and finally

    oauth2Client.generateAuthUrl({
                access_type: 'offline', // offline is important so it returns the refresh token, once you have it, save it in your db or any persistent storage.
                scope: scope, // Use the selected scope
                include_granted_scopes: true, // Include already granted scopes
                state: state, // CSRF protection state
                redirect_uri: process.env.GOOGLE_REDIRECT_URL, // Redirect back after consent
            })
    

    generateAuthUrl will return a URL, redirect the user to it so they can access the consent screen from google and when they approve the access, google will redirect to your GOOGLE_REDIRECT_URL and when on GOOGLE_REDIRECT_URL path, you will need to capture code and state from the url params, compare the oauth_state cookie value with state from url param for csrf protection. And finally

        const oauth2Client = new google.auth.OAuth2(
                process.env.GOOGLE_CLIENT_ID,
                process.env.GOOGLE_CLIENT_SECRET,
                process.env.GOOGLE_REDIRECT_URL
            );
    const { tokens } = await oauth2Client.getToken(code);
            const { refresh_token, scope, access_token, expiry_date, id_token } =
                tokens;