loading...
Cover image for Svelte: Google Sign In/Out

Svelte: Google Sign In/Out

safaiyeh profile image Jason Safaiyeh ใƒป3 min read

You got your awesome Svelte app and it is time to integrate some authentication flows. Sign in with Google is one way to support many users to log into your app.

Google makes it simple to plug in their ready made Google Sign In button for any web project.

Let's get started.

Google Prerequisite

A client ID from Google is necessary to integrate sign in. Configure a project here: https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin

Once you navigated the Google API dashboards and have a client ID, add a meta tag to your root HTML file. If you generated your Svelte app with the default configuration, it should be in public/index.html.

<!doctype html>
<html>
<head>
  <meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">
</head>
...
</html>

Set up the Google Sign In Button

Let us create a new component GoogleSignInButton.svelte to handle the UI and sign in.

Let start off with the component, we need to add the Google Platform and display the button.

<svelte:head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</svelte:head>

<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn" />

Success! โœ… You should see your button.
Google Sign In Button on a web page.

The div takes a property data-onsuccess="onSignIn". It looks for the function window.onSignIn and uses that as the on sign in callback.

<script>
  window.onSignIn = (googleUser) => {
     const profile = googleUser.getBasicProfile();
     console.log('ID: ' + profile.getId());
     console.log('Name: ' + profile.getName());
     console.log('Image URL: ' + profile.getImageUrl());
     console.log('Email: ' + profile.getEmail());
  };
</script>

<svelte:head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</svelte:head>

<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn" />

Now you have access to the public information of the user. You can use the attributes to create a unique user so they can continue to log into your app.

Logging out

To logout we need to use Google API AuthInstance to call sign out, we included this API in our root HTML file.

Let's create a Logout.svelte component.

<script>
  window.signOut = () => {
    const auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(() => {
      // User is now signed out
    });
  }
</script>

<a onclick="signOut">Sign out</a>

We are using the onclick attribute to reference our signOut logic. Now we have signing out! โœ…๐ŸŽ‰

Persisting Session

It would be a pain if the user had to sign in every time they want to access your site. So let's make sure the session is persisted.

We need to know when the Google API has loaded before we try to access it. We can add an on load callback by using the onload URL param.

In GoogleSignInButton.svelte, append the platform URL with ?onload=<NAME OF CALLBACK>

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>

In App.svelte we can handle the case where the user accesses the site. We check if a Google User exists and act accordingly.

<script>
  let userLoggedIn = false;
  window.onLoadCallback = () => {
    userLoggedIn = gapi.auth2.getAuthInstance().isSignedIn.get();
    if (userLoggedIn) {  
      // Handle login
    }
  }
</script>

Now we have persistent sessions with Google authentication! โœ…๐ŸŽ‰

Leave a comment if this was helpful or have any questions!


You can find me on Twitter @safaiyeh

or maintaining react-native-webview and @react-native-community/react-native-cookies.

Keep Building!

Discussion

pic
Editor guide
Collapse
khrome83 profile image
Zane Milakovic

Thanks for the write up.

What is neat about your examples is these are not Svelte specific. There really isnโ€™t any Svelte specific code since you access the window instead of a store or passed in prop.

So this works for just plain html websites as well. ๐Ÿ˜ƒ

Collapse
safaiyeh profile image
Jason Safaiyeh Author

Exactly! Shows how accessible Svelte is.

Collapse
premedios profile image
Pedro Remedios

The logout link doesn't work because it is not in svelte format!

it should be "on:click={signOut}"

Your code should work before posting!