Google Social Login with Magic

Google Social Login with Magic

#Overview

You can allow your users to sign up & login into your web application with their Google account.

#Usage

important

If your users are encountering an "Access blocked: magic.link has not completed the Google verification process" error, please read below.

note

Magic SDK offers two OAuth extensions: v1 and v2. For web applications, it is recommended to use v2, while v1 should be used for mobile applications.

#Prerequisites

#Google Setup (v1 extension)

After installing the OAuth extension, you can now 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: ⁠
  9. In Magic Dashboard, click “Save”
  10. Click "Test Connection" to give your new Google OAuth flow a try!

#Google Setup (v2 extension)

  • Follow above steps, but disregard Magic's Redirect URI in step 8
  • Instead, add the Redirect URI you are passing in as the redirectURI argument to the loginWithRedirect method
Javascript
01await magic.oauth2.loginWithRedirect({
02  provider: 'google',
03  redirectURI: 'https://your-app.com/your/oauth/callback', // <== whitelist this with Google
04});

#Verification Process

If your users are encountering an Access blocked: magic.link has not completed the Google verification process error, you will need to go to your Google developer dashboard and change your app's "Publishing status" from "Testing" to "In production".

⁠To do this, please follow these steps:

  1. Go to your app within the Google developer dashboard and select "OAuth consent screen" on the nav menu.
  2. Under "Publishing status", select "publish app".
  3. Once the status is set to "In production", you should no longer be encountering the error.

Note: If your app meets certain criteria, you might be required to go through a verification process. In order to avoid this, we recommend removing any icons or logos you have added in the Google developer dashboard.

The full list of criteria that requires verification from Google is as follows:

  • You want your application to display an icon or app name
  • Your app requests authorization of any sensitive or restricted scopes
  • The number of authorized domains for your apps exceeds the domain count limit for a project
  • There are changes to the OAuth consent screen after your app has been approved

#Gmail Linking

A user's email login and Google social login can automatically be linked so that logging in with either auth factor will resolve to a single wallet.

important

Each login counts towards a unique monthly active wallet for billing purposes.

This is most useful when end users forget whether they signed up to your app using Google login or via email login. This prevents the user seeing 2 unique wallet addresses and the confusion of around which wallet holds their assets.

By default, this account linking is enabled in the dashboard when you enable Google Sign-In. This will ensure that users who log in with an email and Google social login using the same email address will resolve to the same wallet. Turning this feature off will prevent automatic linking for new users. It will not unlink existing users' social and email logins.

#Resources