# 🔒 Magic OAuth Extension for Web Browsers [![](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js) > With the Magic JavaScript SDK OAuth 2 extension, you can plug into your favorite social login providers with one, easy-to-use API.

License · Changelog · Contributing Guide

## 📖 Documentation See the [developer documentation](https://magic.link/docs/social-login) to learn how to get started with OAuth in Magic SDK. ## 🔗 Installation Integrating your app with OAuth will require our client-side NPM package and OAuth 2 extension: ```bash # Via NPM: npm install --save magic-sdk @magic-ext/oauth2 # Via Yarn: yarn add magic-sdk @magic-ext/oauth2 ``` Alternatively, you can load via CDN with by adding a script tag to your app’s ``: ```html ``` ## ⚡️ Quick Start Sign up or log in to the [developer dashboard](https://dashboard.magic.link) to receive API keys that will allow your application to interact with Magic's authentication APIs. Then, you can start authenticating users with _just two method calls!_ From your login page: ```ts import { Magic } from 'magic-sdk'; import { OAuthExtension } from '@magic-ext/oauth2'; const magic = new Magic('YOUR_API_KEY', { extensions: [new OAuthExtension()] }); await magic.oauth2.loginWithRedirect({ provider: 'google' | 'facebook' | 'github' | ... }); ``` From your OAuth callback page: ```ts import { Magic } from 'magic-sdk'; import { OAuthExtension } from '@magic-ext/oauth2'; const magic = new Magic('YOUR_API_KEY', { extensions: [new OAuthExtension()], }); const res = await magic.oauth2.getRedirectResult(); // Then you can access a user's Magic DID token, OpenID Connect profile information, and more! res.magic.idToken; res.oauth.userInfo; ```