Social Login (OAuth2)

Installation

Supported Platforms

• Web
• RN
• IOS

Supported Providers

• Google / Gmail
• Facebook
• Apple
• GitHub
• Linkedin
• Bitbucket
• GitLab
• Twitter

---

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:

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” – Done! 🎉

---

Facebook

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:

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

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

   

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.

   

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

   

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

   

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

    

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

    

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

• 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

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

11. 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

12. 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

13. 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

14. 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:

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 Github 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

   

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

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

   

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! 🎉

---

Linkedin

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:

1. Follow Linkedin's instructions to create an app

2. Go to your Magic Dashboard

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

4. Navigate to Social Login from the sidebar

5. Click the toggle for Linkedin

6. Copy the Redirect URI field from your Magic Dashboard

7. Return to your Linkedin App Dashboard and select "Sign in with LinkedIn" in the "Products" tab

   

8. and select Auth tab, add the Redirect URI you obtained from your Magic Dashboard into the "Authorized redirect URLs for your app" field

   

9. Click "Update" to save

10. Obtain the "Client ID" and "Client Secret"

    

11. Return to your Magic Dashboard and input the Client ID and Client Secret for your Linkedin OAuth app

12. 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:

1. Go to your Magic Dashboard

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

3. Navigate to Social Login from the sidebar

4. Click the toggle for Bitbucket

5. Copy the Redirect URI field from your Magic Dashboard

6. 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.

   

7. Click Settings on the left sidebar, then click OAuth consumers, then click Add consumer button.

   

8. Add the Redirect URI you obtained from your Magic Dashboard into the Callback URL and click Save

   

9. Please make sure at least to grant Read permission in the account section. Otherwise, authentication will not complete

   

10. Obtain the "Key" and "Secret"

    

11. Return to your Magic Dashboard and input the Key and Secret for your bitbucket OAuth app

12. 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:

1. Go to your Magic Dashboard

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

3. Navigate to Social Login from the sidebar

4. Click the toggle for GitLab

5. Copy the Redirect URI field from your Magic Dashboard

6. Go to GitLab App Dashboard. Navigate to Profile Settings > Applications

7. In the application form, enter a Name (arbitrary), and make sure to paste the Redirect URI in the input field.

   

8. Make sure to tick openid, profile, email in the Scopes

   

9. 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.

   

10. Return to your Magic Dashboard and input the Application Id and Secret for your GitLab OAuth app

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

Twitter

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

👉 Play with a demo

Prerequisites

• You will need a Twitter 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

Twitter Setup

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

1. Go to your Magic Dashboard

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

3. Navigate to Social Login from the sidebar

4. Click the toggle for Twitter

5. Copy the Redirect URI field from your Magic Dashboard

6. Go to Twitter App Dashboard. Navigate to Projects & Apps

7. In the Projects, click add App, enter your app Name, and click complete

   

8. make sure to copy the API key, API secret key to the Magic dashboard, which you can then use with your application that connects to Twitter

   

9. In Magic Dashboard, click Save

10. Back to the Twitter Dashboard, click Edit in th Authentication settings section

    

11. Toggle Enable 3-legged OAuth and Request email address from user. Make sure to paste the Redirect URI in the input callback URLs and click Save

    

12. You are all set! 🎉