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.
Style your Google button however you’d like!
👉 Play with a demo
Prerequisites
- You will need a Google Developer account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
Google Setup
After installing the OAuth extension, you can now enable Google Login for your Magic app:
Follow Google’s instructions to set up an OAuth 2.0 app
Obtain the OAuth Client ID and Client Secret from your Google Developer dashboard
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable Google Login, or create a new app
Navigate to Social Login from the sidebar
Click the toggle for Google / Gmail
Input the Client ID and Client Secret for your OAuth app
Copy the Redirect URI field from your Magic Dashboard and add it to your Google Dashboard’s OAuth app configuration:
In Magic Dashboard, click “Save” – Done! 🎉
You can allow your users to sign up & log in to your web app with their Facebook account.
Style your Facebook button however you’d like!
👉 Play with a demo
Prerequisites
- You will need a Facebook Developer account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
Facebook Setup
After installing the OAuth extension, you can now enable Facebook Login for your Magic app:
Follow Facebook's instructions to register a Facebook app
When creating your Facebook app, select "For Everything Else" to include Facebook Login
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.
Skip the "Quick Start" flow and go directly to Settings > Basic
Obtain the "App ID" and "App Secret"
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable Facebook Login, or create a new app
Navigate to Social Login from the sidebar
Click the toggle for Facebook
Input the App ID and App Secret for your Facebook app
Copy the Redirect URI field from your Magic Dashboard
Return to your Facebook Dashboard and go to Facebook Login > Settings
Paste the Redirect URI you obtained from your Magic Dashboard into the "Valid OAuth Redirect URIs" field
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
- You will need an Apple developer account
- You will need to have created a primary App ID for your Apple developer account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
Apple Setup
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable Sign in with Apple, or create a new app
Navigate to Social Login from the sidebar
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
Open a new tab, go to your Apple developer dashboard
Navigate to Membership from the sidebar
Find your Team ID. Copy/paste this to the setup form on Magic Dashboard
In Apple's dashboard, navigate to Certificates, IDs, & Profiles from the sidebar
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
- 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
- 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 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
- 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.
Style your GitHub button however you’d like!
👉 Play with a demo
Prerequisites
- You will need a GitHub account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
GitHub Setup
After installing the OAuth extension, you can now enable GitHub Login for your Magic app:
Follow GitHub's instructions to create an OAuth app
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable Github Login, or create a new app
Navigate to Social Login from the sidebar
Click the toggle for GitHub
Copy the Redirect URI field from your Magic Dashboard
Return to your GitHub Dashboard and paste the Redirect URI you obtained from your Magic Dashboard into the "Authorization callback URL" field
Click "Register App" to complete your GitHub OAuth app setup.
On the next page, obtain the "Client ID" and "Client Secret"
Return to your Magic Dashboard and input the Client ID and Client Secret for your GitHub OAuth app
In Magic Dashboard, click “Save” – Done! 🎉
You can allow your users to sign up & log in to your web app with their Linkedin account.
👉 Play with a demo
Prerequisites
- You will need a Linkedin account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
Linkedin Setup
After installing the OAuth extension, you can now enable Linkedin Login for your Magic app:
Follow Linkedin's instructions to create an app
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable Linkedin Login, or create a new app
Navigate to Social Login from the sidebar
Click the toggle for Linkedin
Copy the Redirect URI field from your Magic Dashboard
Return to your Linkedin App Dashboard and select "Sign in with LinkedIn" in the "Products" tab
and select Auth tab, add the Redirect URI you obtained from your Magic Dashboard into the "Authorized redirect URLs for your app" field
Click "Update" to save
Obtain the "Client ID" and "Client Secret"
Return to your Magic Dashboard and input the Client ID and Client Secret for your Linkedin OAuth app
In Magic Dashboard, click “Save” – Done! 🎉
Bitbucket
You can allow your users to sign up & log in to your web app with their Bitbucket account.
👉 Play with a demo
Prerequisites
- You will need a Bitbucket account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
Bitbucket Setup
After installing the OAuth extension, you can now enable Bitbucket Login for your Magic app:
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable bitbucket Login, or create a new app
Navigate to Social Login from the sidebar
Click the toggle for Bitbucket
Copy the Redirect URI field from your Magic Dashboard
Go to Bitbucket App Dashboard. From your profile avatar in the bottom left, click on the workspace in the Recent workspaces list or click All workspaces to open an entire list from which to choose.
Click Settings on the left sidebar, then click OAuth consumers, then click Add consumer button.
Add the Redirect URI you obtained from your Magic Dashboard into the Callback URL and click Save
Please make sure at least to grant Read permission in the account section. Otherwise, authentication will not complete
Obtain the "Key" and "Secret"
Return to your Magic Dashboard and input the Key and Secret for your bitbucket OAuth app
In Magic Dashboard, click “Save” – Done! 🎉
GitLab
You can allow your users to sign up & log in to your web app with their GitLab account.
👉 Play with a demo
Prerequisites
- You will need a GitLab account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
GitLab Setup
After installing the OAuth extension, you can now enable GitLab Login for your Magic app:
Go to your Magic Dashboard
Select the Magic app for which you’d like to enable GitLab Login, or create a new app
Navigate to Social Login from the sidebar
Click the toggle for GitLab
Copy the Redirect URI field from your Magic Dashboard
Go to GitLab App Dashboard. Navigate to Profile Settings > Applications
In the application form, enter a Name (arbitrary), and make sure to paste the Redirect URI in the input field.
Make sure to tick openid, profile, email in the Scopes
When you click Save application you are provided with the application ID and the application secret which you can then use with your application that connects to GitLab.
Return to your Magic Dashboard and input the Application Id and Secret for your GitLab OAuth app
In Magic Dashboard, click “Save” – Done! 🎉