Guides
Guide

How to integrate Google Login into Webflow

How to integrate Google Login into Webflow

8 September 2021
Banner for How to integrate Google Login into Webflow
note

This is the second part of the Magic and Webflow series. Make sure to follow our first Guide on Webflow before proceeding.

Hi there! In this guide, we’ll be learning how to add the Google login option to a Webflow website. Here’s a live demo of the end result.

Step 1. Create a Google Developer account

You can do that here.

Step 2. Import the Magic SDK - OAuth Extension

Update your Webflow site’s Project Settings > Custom Code > Head Code to include a script that imports the Magic OAuth extension.

<!-- 1. Get Magic SDK --> <script src="https://auth.magic.link/sdk"></script> <!-- 2. Get Magic OAuth Extension --> <script src="https://auth.magic.link/sdk/extension/oauth"></script> <!-- 3. Initialize Magic --> <script> const magic = new Magic('pk_live_C69248ABCF277B67', { extensions: [new MagicOAuthExtension()], }); </script>

Don’t forget to Save Changes and publish your site for the changes to take effect.

Step 3. Enable Google Login for your Magic app

  1. Follow Google’s instructions to set up an OAuth 2.0 app
  2. Obtain the OAuth Client ID and Client Secret from your Google Developer dashboard
  3. Go to your Magic Dashboard
  4. Select the Magic app for which you’d like to enable Google Login, or create a new app
  5. Navigate to Social Login from the sidebar
  6. Click the toggle for Google / Gmail
  7. Input the Client ID and Client Secret for your OAuth app
  8. Copy the Redirect URI field from your Magic Dashboard and add it to your Google Dashboard’s OAuth app configuration:

Magic Google

Step 4. Update the UI

Now let’s head to Webflow’s Designer > Login page and add the elements we need. Namely, text to make the social login option apparent, and a button with the following ID: loginWithGmailBtn.

Webflow Email or Google Login Login Elements Tree Login with Google Button

Step 5. Trigger the Google Login

Next, we’ll want to trigger the Google login when the user clicks on the Google button. Head to the Login Settings > Custom Code > Before </body> tag and add the following code within the <script> tag:

// Log in or create a new user. const loginWithGmail = async () => { await magic.oauth.loginWithRedirect({ provider: 'google', redirectURI: `${window.location.origin}`, }) .catch((error) => { console.log("Error while logging in with Gmail: ", error); }) } // Call the loginWithGmail function when the user // clicks the Login with Gmail button. loginWithGmailBtn.addEventListener('click', loginWithGmail);

Step 6. Handle the response

Last thing we need to do is get the final OAuth 2.0 result. To do this, add the following code in Home Settings > Custom Code > Before </body> tag:

<script> // `getRedirectResult()` returns an object with user // data from Magic and the social provider const getResult = async () => { const result = await magic.oauth.getRedirectResult(); console.log('User Data: ', result) } getResult() </script>

Share your feedback or questions

That’s it! I hope that helps. Do you have any feedback on this Guide? Share them in the comments section below. Running into an issue? Join our Discord community and ask your questions in the #help channel.

Let's make some magic!