Skip to content

Instantly share code, notes, and snippets.

Created Oct 13, 2014
What would you like to do?
Authenticate with Google through Auth0 and refresh the access token from Browser
  1. Create a Client ID and an API Key on Google API Console. Set the Allowed Origins (e.g. localhost:3000).
  2. Create an app in Auth0 and set the Allowed Origins (e.g. localhost:3000) and the callback to

<!DOCTYPE html>
<meta charset='utf-8' />
<!--Add a button for the user to click to initiate auth sequence -->
<input type="submit" class="btn-login" id="btn-login" value="Login" />
<input type="submit" class="btn-refresh" id="btn-refresh" value="Refresh Acccess Token" />
<input type="submit" class="btn-api" id="btn-api" value="Call /me Google API" />
<p>My access token is <span id="at"></span></p>
<script type="text/javascript">
// Create a Client ID on Google API Console and enter localhost:3000 as a valid origin
// Create a Browser Key on Google API Console and allow http://localhost:3000/*
var GOOGLE_APIKEY = 'AIzaSyB-O8tPvKl07e-dzOAnFjvXrJkAiC9yLQ4';
// Enter the Scopes you need.
// Create an Auth0 app and set localhost:3000 as a valid origin and as a valid callback
var AUTH0_CLIENTID = '3hy8Ld9ApIo8l6Og2glrYuF1u25Sohms';
function initializeGapi() {
function getOrRefreshGoogleAccessToken() {
gapi.auth.authorize({client_id: GOOGLE_CLIENTID, scope: GOOGLE_SCOPES, immediate: true}, function(authResult) {
if (authResult) {
document.getElementById('at').textContent = authResult.access_token;
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.load('plus', 'v1', function() {
var request ={
'userId': 'me'
request.execute(function(resp) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = resp.image.url;
var widget;
document.addEventListener( "DOMContentLoaded", function(){
widget = new Auth0Widget({
domain: '',
callbackURL: location.href,
callbackOnLocationHash: true
var userProfile;
document.getElementById('btn-login').addEventListener('click', function() {
widget.signin({ popup: true }, null, function(err, profile, token) {
if (err) {
// Error callback
} else {
// Success calback
// Save the JWT token.
localStorage.setItem('userToken', token);
// Save the profile
userProfile = profile;
// only do this if the user logged in with google
if (userProfile.identities[0].provider === 'google-oauth2') {
document.getElementById('btn-refresh').addEventListener('click', getOrRefreshGoogleAccessToken);
document.getElementById('btn-api').addEventListener('click', makeApiCall);
<script src=""></script>
<script src="//"></script>
<div id="content"></div>
<p>Retrieves your profile name using the Google Plus API.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment