Social Login (OAuth2)

Installation

Supported Platforms

Supported Providers

Google / Gmail

You can allow your users to sign up & log in to your web app with their Google account.

Google Login Button Style your Google button however you’d like!

👉 Play with a demo

Prerequisites

Google Setup

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:

    Google Dashboard's redirect uri

  9. In Magic Dashboard, click “Save” – Done! 🎉

Facebook

You can allow your users to sign up & log in to your web app with their Facebook account.

Facebook Login Button Style your Facebook button however you’d like!

👉 Play with a demo

Prerequisites

Facebook Setup

After installing the OAuth extension, you can now enable Facebook Login for your Magic app:

  1. Follow Facebook's instructions to register a Facebook app

  2. When creating your Facebook app, select "For Everything Else" to include Facebook Login

    Facebook app registration scenario select screen

  3. On the next screen, you'll be presented with different products you can integrate into your Facebook app. Click "Set Up" in the card representing the Facebook Login capability.

    Add Facebook Login capability screen

  4. Skip the "Quick Start" flow and go directly to Settings > Basic

    Go to Facebook app basic settings

  5. Obtain the "App ID" and "App Secret"

    Facebook app basic settings showing app ID and app secret fields

  6. Go to your Magic Dashboard

  7. Select the Magic app for which you’d like to enable Facebook Login, or create a new app

  8. Navigate to Social Login from the sidebar

  9. Click the toggle for Facebook

  10. Input the App ID and App Secret for your Facebook app

  11. Copy the Redirect URI field from your Magic Dashboard

  12. Return to your Facebook Dashboard and go to Facebook Login > Settings

    Go to Facebook Login settings

  13. Paste the Redirect URI you obtained from your Magic Dashboard into the "Valid OAuth Redirect URIs" field

    Go to Facebook Login settings

  14. In Magic Dashboard, click “Save” – Done! 🎉

Apple

You can allow your users to sign up & log in to your web app with their Apple ID.

👉 Play with a demo

Prerequisites

Apple Setup

  1. Go to your Magic Dashboard

  2. Select the Magic app for which you’d like to enable Sign in with Apple, or create a new app

  3. Navigate to Social Login from the sidebar

  4. Click the toggle for Apple. Looks like we'll need to collect a few important details from Apple first: a Services ID, Key ID, Team ID, and Private Key

  5. Open a new tab, go to your Apple developer dashboard

  6. Navigate to Membership from the sidebar

  7. Find your Team ID. Copy/paste this to the setup form on Magic Dashboard

  8. In Apple's dashboard, navigate to Certificates, IDs, & Profiles from the sidebar

  9. Add a new Services ID for your Magic authentication connection. The identifier you select here should be added to the setup form on Magic Dashboard as your Services ID. Click Continue, then click Register

Add Apple Services ID

  1. You'll be returned to a list of Services IDs you've registered, including your new one for Magic authentication. Click your newly created Services ID to enable it for Sign in with Apple. Then, click Configure

Add Apple Services ID

  1. A modal will show, allowing you to connect your Services ID to specific internet domains. In Domains & Subdomains, enter auth.magic.link. In Return URLs, you'll paste the Redirect URI listed on Magic Dashboard for your Apple Social Login connection. Once you've entered the correct information, you can save your Services ID by clicking Continue, then Save

Add Apple Services ID

  1. Add a new Key for your Magic authentication connection. Make sure to select Sign in with Apple as part of this auth key's permissions. Once you save your selection, note the Key ID and click Download

Add Apple Services ID

  1. Return to Magic Dashboard, you should have Team ID and Services ID populated by this step. Now you can paste your Key ID as well. Finally, you'll need to paste the contents of the Private Key file you downloaded from Apple's dashboard Click “Save” – Done! 🎉

GitHub

You can allow your users to sign up & log in to your web app with their GitHub account.

GitHub Login Button Style your GitHub button however you’d like!

👉 Play with a demo

Prerequisites

GitHub Setup

After installing the OAuth extension, you can now enable GitHub Login for your Magic app:

  1. Follow GitHub's instructions to create an OAuth app

  2. Go to your Magic Dashboard

  3. Select the Magic app for which you’d like to enable Facebook Login, or create a new app

  4. Navigate to Social Login from the sidebar

  5. Click the toggle for GitHub

  6. Copy the Redirect URI field from your Magic Dashboard

  7. Return to your GitHub Dashboard and paste the Redirect URI you obtained from your Magic Dashboard into the "Authorization callback URL" field

    Paste Redirect URI into GitHub OAuth setup

  8. Click "Register App" to complete your GitHub OAuth app setup.

  9. On the next page, obtain the "Client ID" and "Client Secret"

    GitHub OAuth app settings showing client ID and client secret fields

  10. Return to your Magic Dashboard and input the Client ID and Client Secret for your GitHub OAuth app

  11. In Magic Dashboard, click “Save” – Done! 🎉

Edit this page