Search code examples
gmail-apiaccess-tokenrefresh-token

Refresh token in Gmail API?


After successful login, I am getting access token, expire token type, and this stuff in my console by "console.log("my response ",response)". But there is no refresh token. how to get a refresh token. And 2nd question is, How to get an access token using a refresh token? I am using JavaScript. And guide me is this a best way way to get an access token? Successful login is not giving refresh token, without refresh token how can I refresh my access token? Here is my code

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FIFV Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link rel="stylesheet" href="home.css">
  <script src="https://apis.google.com/js/api.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>

<body>


  <div class="wrapper fadeInDown">
    <div id="formContent">
      <!-- Tabs Titles -->
  
      <!-- Icon -->
      <div class="fadeIn first">
        <img src="Images/company Logo.png" id="icon" alt="User Icon" />
      </div>
  
      <!-- Login Form -->
      <form>
      <h3 class="heading"> Welcome to
      FIFV authentication </h3>
      <p class="shortPara">Please authenticate yourself to get access to the dashboard.</p>
      <!-- <input type="submit" class="fadeIn fourth" value="Log In" href="Home.html"> -->
      <br>
      <button onclick="authenticate().then(loadClient)" type="button" class="btn"><a>Authorise</a></button>
      <p id="errorMsg"></p>
      
      </form>
     
  
    </div>
  </div>

  <script>
  
    /**
     * Sample JavaScript code for gmail.users.messages.list
     * See instructions for running APIs Explorer code samples locally:
     * https://developers.google.com/explorer-help/code-samples#javascript
     */



// Authentication code

    function authenticate() {
      return gapi.auth2.getAuthInstance()
        .signIn({ scope: "https://www.googleapis.com/auth/gmail.modify https://www.googleapis.com/auth/gmail.compose https://www.googleapis.com/auth/gmail.readonly" })
        .then(function (response) { console.log("Sign-in successful", response);
      console.log("Access Token", response.Bc.access_token)
      localStorage.setItem("accessToken", response.Bc.access_token) 
      localStorage.setItem("expire", response.Bc.expires_in) 
    
    },
          function (err) { console.error("Error signing in", err); });
    }
    function loadClient() {
      gapi.client.setApiKey("my-api-key");
      return gapi.client.load("https://gmail.googleapis.com/$discovery/rest?version=v1")
        .then(function () { console.log("GAPI client loaded for API"); },
          function (err) { console.error("Error loading GAPI client for API", err);
        
          document.getElementById('errorMsg').innerHTML = err;


      });
    }

  gapi.load("client:auth2", function () {
      gapi.auth2.init({
        client_id: "my-client-id",
        plugin_name: "hello"
      });
    });

function logout() {
        fetch("https://oauth2.googleapis.com/revoke?token=" + token,
            {
                method: 'POST',
                headers: {
                    "Content-type": "application/x-www-form-urlencoded"
                }
            })
            .then((data) => {
                location.href = "http://localhost:5500/index.html"
            })
    }
  </script>
  <script src="home.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

Solution

  • I was reviewing the Google Documentation for JavaScript, and I found the following sample that might help you:

     if (gapi.client.getToken() === null) {
              // Prompt the user to select a Google Account and ask for consent to share their data
              // when establishing a new session.
              tokenClient.requestAccessToken({prompt: 'consent'});
            } else {
              // Skip display of account chooser and consent dialog for an existing session.
              tokenClient.requestAccessToken({prompt: ''});
            }
          }
    

    You can read more information about this here, and information about the refresh token can be found here.

    Lastly, you can read the information in this question. It has a lot of information about the refresh token.