In this part, we’ll be going over how to use the
gapi library to configure Sign-In and then actually sign-in the user, as well as a few snippets for handling some common user scenarios.
- Load the api.js library instead of platform.js :shrug: (not sure why they’re different)
Here, we configure our Sign-In client once the library has loaded using the
?onload=onLibraryLoaded callback that you can provide via the URL.
api.js will add a global variable called
2. Add a button to your index.html with a button click handler
<button onclick="onSignInClicked()">Sign in with button onClick</button>
3. Add the following to your script tag in index.html to handle the button click
We can then access the
gapi.auth2 library and initialize it using our
client_id from the Developer Console.
- listening for when the user has signs in
- checking if the user is logged in
- getting the users info
- only allow users from a particular domain to log in
- only allow certain users to log in
- hide content until after a user logs in
- sending your ID token to a backend (if you have one)
In the above example, we can only run some code after we initialize and sign in the user. But what if you have different parts of the page in different files, each showing something different depending on the user? (this might be the case if you’re using components)
checking if the user is signed in
A few things to note about using this function:
- The Sign-In library will, by default, sign you in automatically if you’ve already signed in.
- If you refresh the page, even after the user has signed in, then on first laod, you’ll get
auth2.isSignedIn.get() === false
- After the user is signed in automatically (usually takes a sec), then
auth2.isSignedIn.get() === true
- Depending on how you handle your login UI, your user might see that they are not logged in for a hot second. It’s helpful to use the
isSignedIn.listen()callback if you want to know the precise moment this happens.
getting the users info
only allowing users from a particular domain to login
This is a little bit of a hack and is probably easy to circumvent, but you can use the
getHostedDomain() method to get the G-Suite domain the user comes from. If the user does not have a G-Suite domain, then it’ll be blank.
only allowing certain users to login
hiding content until after the user logs in
This is also a hack. This is easy to workaround if you fidget with the CSS in your browser, but can work if it fits your use case. The reason this is a bad idea is that in a static website, all of the information thats available in your HTML is available to the user. DO NOT USE THIS if you have actual sensitive information to hide. It is a good candidate for showing your favorite cat pictures.
send the token to identify the user (not their ID)
If you’re making a backend request, you’ll want to send the users ID token to your backend as an Authorization header. On your backend, you’d then be able to validate and decode the ID token (see here for examples).
The benefit of the approach is that this ID token (a type of JWT token) is signed by Google, so you know the information hasn’t been tampered with.
Demo code is available on Github intricatecloud/google-sign-in-demo. Replace
YOUR_CLIENT_ID with your client ID, and you’ll be able to see the sign in buttons in action.
For the last part of this series, we’ll look at some examples of how you might use google sign-in in a React and Angular application. Check it out next week — give the post some 👏 and follow me to see my next post.