OAuth 2.0 implementation for various providers in one place.
This project contains OAuth 2.0 implementation for various providers and help you understand following OAuth 2.0 flow:
- Show platform dialog
- Get Access Token
- Use token to fetch user details
Actual steps implemented in this sample code repository:
- Create redirect URL for respective platform
- Redirect the user to respective platform
- User decides to grant the permissions to the application
- Receive temporary code on the server
- Exchange the temporary code for access token
- Get user details using the access token
- Save user details into the database and authenticate the user
Although this project is built using React on the front-end and NodeJS on the back-end, the flow and implementation largely remains same for any other language or framework.
- Read official flow: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow
- Create a new application: https://developers.facebook.com/apps/
- Goto App โ Add Product and choose Facebook Login
- Goto App โ Products โ Facebook Login โ Settings and add a
Valid OAuth Redirect URI
ashttps://example.com/authorize/
(replace your actual domain for live) - Goto App โ Settings and copy
App ID
andApp Secret
- Update
web/.env.local
REACT_APP_OAUTH_FACEBOOK_ID
withApp ID
- Update
api/.env.local
OAUTH_FACEBOOK_ID
withApp ID
- Update
api/.env.local
OAUTH_FACEBOOK_SECRET
withApp Secret
- Read official flow: https://developers.google.com/identity/protocols/oauth2/web-server
- Create a new application: https://console.cloud.google.com/projectcreate
- Setup consent screen https://console.cloud.google.com/apis/credentials/consent
- Choose
External
(Available to any user with a Google Account.) - In
Authorized domains
input enterexample.com
- Fill in
Application Name
and clickSave
button
- Choose
- Create Credentials https://console.cloud.google.com/apis/credentials
- Click on
+ CREATE CREDENTIALS
button - Choose
OAuth client ID
- Select
Web application
- For
Authorized redirect URIs
, fill in following two entries:https://example.com/authorize/
http://localhost:3000/authorize/
- Click on
- Copy
Your Client ID
andYour Client Secret
- Update
web/.env.local
REACT_APP_OAUTH_GOOGLE_ID
withYour Client ID
- Update
api/.env.local
OAUTH_GOOGLE_ID
withYour Client ID
- Update
api/.env.local
OAUTH_GOOGLE_SECRET
withYour Client Secret
-
Read official flow: https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
-
Create a new application: https://developers.facebook.com/apps/
-
Goto App โ Settings โ Basic and fill in all the required fields
-
Goto App โ Add Product and choose Instagram Basic Display
-
Click on
Create New App
button -
Goto App โ Products โ Basic Display and fill in following
Valid OAuth Redirect URIs
ashttps://example.com/authorize/
Deauthorize Callback URL
ashttps://example.com/authorize/instagram-deauthorize
Data Deletion Request URL
ashttps://example.com/authorize/instagram-delete
-
Goto App โ Products โ Basic Display โ Roles โ Roles and click on
Add Instagram Testers
, search for your account and click onSubmit
-
Accept the tester invite https://www.instagram.com/accounts/manage_access/
-
Goto App โ Products โ Basic Display and copy
Instagram App ID
andInstagram App Secret
-
Update
web/.env.local
REACT_APP_OAUTH_INSTAGRAM_ID
withInstagram App ID
-
Update
api/.env.local
OAUTH_INSTAGRAM_ID
withInstagram App ID
-
Update
api/.env.local
OAUTH_INSTAGRAM_SECRET
withInstagram App Secret
-
Note:
- As of writing this Readme, Instagram does not accept
localhost:3000
as valid callback URI. So while testing, you may need to manually change the callback URL. - For production, you need to complete
App Review for Instagram Basic Display
by submittinginstagram_graph_user_profile
andinstagram_graph_user_media
for review.
- As of writing this Readme, Instagram does not accept
- Read official flow: https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow
- Create a new application: https://www.linkedin.com/developers/apps/new and fill in following:
App name
enter your application name, eg:Example
Company
select an existing or create new company pageApp logo
upload a logo
- Click on
Create app
button - Goto App โ Auth
- Under
Redirect URLs
, fill in following two entries:http://localhost:3000/authorize/
https://example.com/authorize/
- Copy
Client ID
andClient Secret
- Under
- Update
web/.env.local
REACT_APP_OAUTH_LINKEDIN_ID
withClient ID
- Update
api/.env.local
OAUTH_LINKEDIN_ID
withClient ID
- Update
api/.env.local
OAUTH_LINKEDIN_SECRET
withClient Secret
- Read official flow: https://developer.twitter.com/en/docs/authentication/oauth-2-0
- Create a new project: https://developer.twitter.com/en/portal/projects-and-apps and fill in following:
Project name
enter your project name, eg:Example
Project use
select appropriate use-case
- Create a new app inside project: https://developer.twitter.com/en/portal/projects/<PROJECT_ID>/apps/create-or-connect and fill in following:
App environment
selectDevelopment
App name
enter your application name, eg:Example
- Click on
App Setting
button - Under User authentication settings on
Setup
button - Enable
OAuth 2.0
- Under
Callback URI / Redirect URL
, fill in following two entries:http://localhost:3000/authorize/
https://example.com/authorize/
- Enter
Website URL
- Click
Save
button
- Head to
Keys and token
https://developer.twitter.com/en/portal/projects/<PROJECT_ID>/apps/<APP_ID>/keys OAuth 2.0 Client ID and Client Secret section- Update
web/.env.local
REACT_APP_OAUTH_TWITTER_ID
withClient ID
- Update
api/.env.local
OAUTH_TWITTER_ID
withClient ID
- Update
api/.env.local
OAUTH_TWITTER_SECRET
withClient Secret
- Update
- Read official flow: https://github.com/reddit-archive/reddit/wiki/OAuth2
- Create a new OAuth application: https://www.reddit.com/prefs/apps and fill in following:
name
enter your application name, eg:Example
description
enter info about your app, eg:OAuth example application
about url
enter your website url, eg:https://example.com
redirect uri
:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Click on
create app
button - Copy
id
(below the entered app name) andsecret
- Update
web/.env.local
REACT_APP_OAUTH_REDDIT_ID
withid
- Update
api/.env.local
OAUTH_REDDIT_ID
withid
- Update
api/.env.local
OAUTH_REDDIT_SECRET
withsecret
- Read official flow: https://discord.com/developers/docs/topics/oauth2
- Create a new OAuth application: https://discord.com/developers/applications and click on
New Application
- Fill in
name
, eg:Example
and click onCreate
button - Go to application's OAuth section https://discord.com/developers/applications/CLIENT_ID/oauth2 and for
Redirects
, create following two entries:http://localhost:3000/authorize/
for developmenthttps://example.com/authorize/
for production
- Copy
CLIENT ID
(below the entered app name) andCLIENT SECRET
- Update
web/.env.local
REACT_APP_OAUTH_DISCORD_ID
withCLIENT ID
- Update
api/.env.local
OAUTH_DISCORD_ID
withCLIENT ID
- Update
api/.env.local
OAUTH_DISCORD_SECRET
withCLIENT SECRET
- Read official flow: https://marketplace.zoom.us/docs/guides/build/oauth-app
- Create a new OAuth application: https://marketplace.zoom.us/develop/create under OAuth click
Create
button and fill in following:Name
enter your application name, eg:Example
- Select
User-managed app
- Under
Redirect URL for OAuth
, enter following:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Under
Whitelist URL
, enter following:- For development, enter
http://localhost:3000
- For production, enter
https://example.com
- For development, enter
- Goto Your App โ Scopes and click on
+ Add scopes
- Select
User
- Check
user:read
anduser_profile
- Select
- Fill in required fields under
Information
likeShort Description
,Developer Contact Information
, etc. - Copy
Client ID
andClient Secret
- Update
web/.env.local
REACT_APP_OAUTH_ZOOM_ID
withClient ID
- Update
api/.env.local
OAUTH_ZOOM_ID
withClient ID
- Update
api/.env.local
OAUTH_ZOOM_SECRET
withClient Secret
- Read official flow: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps
- Create a new OAuth application: https://github.com/settings/applications/new and fill in following:
Application name
enter your application name, eg:Example
Homepage URL
enter your website url, eg:https://example.com
Authorization callback URL
:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Copy
Client ID
andClient Secret
- Update
web/.env.local
REACT_APP_OAUTH_GITHUB_ID
withClient ID
- Update
api/.env.local
OAUTH_GITHUB_ID
withClient ID
- Update
api/.env.local
OAUTH_GITHUB_SECRET
withClient Secret
- Read official flow: https://docs.gitlab.com/ee/api/oauth2.html#web-application-flow
- Create a new OAuth application: https://gitlab.com/profile/applications and fill in following:
Name
enter your application name, eg:Example
Homepage URL
enter your website url, eg:https://example.com
Authorization callback URL
enterhttp://localhost:3000/authorize/
and on new linehttps://example.com/authorize/
- For
Scopes
checkread_user
,profile
andemail
- Click on
Save application
button and copyApplication ID
andSecret
- Update
web/.env.local
REACT_APP_OAUTH_GITLAB_ID
withApplication ID
- Update
api/.env.local
OAUTH_GITLAB_ID
withApplication ID
- Update
api/.env.local
OAUTH_GITLAB_SECRET
withSecret
- Read official flow: https://docs.gitlab.com/ee/api/oauth2.html#web-application-flow
- Create a new OAuth application: https://cloud.digitalocean.com/account/api/applications/new and fill in following:
Name
enter your application name, eg:Example
Homepage URL
enter your website url, eg:https://example.com
Description
enter info about your app, eg:OAuth example application
Authorization callback URL
:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Click on
Save
button - Click on More โ View and copy
Client ID
andClient Secret
- Update
web/.env.local
REACT_APP_OAUTH_DIGITALOCEAN_ID
withClient ID
- Update
api/.env.local
OAUTH_DIGITALOCEAN_ID
withClient ID
- Update
api/.env.local
OAUTH_DIGITALOCEAN_SECRET
withClient Secret
- Read official flow: https://confluence.atlassian.com/bitbucket/oauth-on-bitbucket-cloud-238027431.html
- Create a new OAuth application: https://bitbucket.org/USERNAME/workspace/settings/oauth-consumers/new and fill in following:
Name
enter your application name, eg:Example
Homepage URL
enter your website url, eg:https://example.com
Description
enter info about your app, eg:OAuth example application
Callback URL
:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Under
Permissions โ Account
checkEmail
andRead
- Click on
Save
button - Click on Name of your application and copy
Key
andSecret
- Update
web/.env.local
REACT_APP_OAUTH_BITBUCKET_ID
withKey
- Update
api/.env.local
OAUTH_BITBUCKET_ID
withKey
- Update
api/.env.local
OAUTH_BITBUCKET_SECRET
withSecret
- Read official flow: https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow
- Create a new OAuth application: https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade and fill in following:
Name
enter your application name, eg:Example
Supported account types
chooseAccounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
Redirect URI
:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Goto Dashboard โ App โ Certificates & secrets and under
Client secrets
click on+ New client secret
- Enter
Description
, eg:Example Secret Key
- For
Expires
chooseNever
- Enter
- Click on
Add
button and copy theSecret
value - Click on Name of your application and copy
Application (client) ID
andSecret
- Update
web/.env.local
REACT_APP_OAUTH_AZURE_ID
withApplication (client) ID
- Update
api/.env.local
OAUTH_AZURE_ID
withApplication (client) ID
- Update
api/.env.local
OAUTH_AZURE_SECRET
withSecret
- Optionally, change
OAUTH_AZURE_TENANT
as per your requirement.
- Read official flow: https://developer.spotify.com/documentation/general/guides/authorization-guide
- Create a new OAuth application: https://developer.spotify.com/dashboard/applications and fill in following:
App or Hardware Name
enter your application name, eg:Example
App or Hardware Description
enter your application name, eg:Example OAuth app
- Goto Dashboard โ App and click on
Edit settings
- For
Redirect URIs
make following entries:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Copy
Client ID
andClient Secret
- Update
web/.env.local
REACT_APP_OAUTH_SPOTIFY_ID
withClient ID
- Update
api/.env.local
OAUTH_SPOTIFY_ID
withClient ID
- Update
api/.env.local
OAUTH_SPOTIFY_SECRET
withClient Secret
- Read official flow: https://shopify.dev/tutorials/authenticate-with-oauth
- Create a new OAuth application: https://partners.shopify.com/PARTNER_ID/apps/new/applications and fill in following:
App name
enter your application name, eg:Example
App URL
enter your application URL, eg:https://example.com
- For
Whitelisted redirection URL(s)
make following entries:- For development, enter
http://localhost:3000/authorize/
- For production, enter
https://example.com/authorize/
- For development, enter
- Create a store https://partners.shopify.com/PARTNER_ID/stores for testing
- Copy
API key
andAPI secret key
- Update
web/.env.local
REACT_APP_OAUTH_SHOPIFY_ID
withAPI key
- Update
web/.env.local
REACT_APP_OAUTH_SHOPIFY_STORE
with your test store ID - Update
api/.env.local
OAUTH_SHOPIFY_ID
withAPI key
- Update
api/.env.local
OAUTH_SHOPIFY_SECRET
withAPI secret key
- Update
api/.env.local
OAUTH_SHOPIFY_STORE
with your test store ID
oauth
โโโ api
โ > PORT 4000
โ > localhost:4000
โ > api.example.com
โ
โโโ web
โ > PORT 3000
โ > localhost:3000
โ > example.com
โ
โโโ README.md (you are here)
-
Prerequisites
- Node (
v12.x
) - MongoDB (
v4.x
) - IDE (Webstorm / Visual Studio Code)
- Node (
-
Clone repository
git clone [email protected]:atulmy/oauth.git oauth
-
API
- Switch to
api
directorycd oauth/api
- Configuration
- Create local environment file
cp .env.dev .env.local
- Edit
.env.local
forSECURITY_SECRET
,DATABASE_URL
andOAUTH_..
values
- Create local environment file
- Setup
- Install packages
npm install
- Install packages
- Run
- Start API server:
npm start
(http://localhost:4000)
- Start API server:
- Switch to
-
Web
- Switch to
web
directorycd oauth/web
- Configuration
- Create local environment file
cp .env.dev .env.local
- Edit
.env.local
forREACT_APP_OAUTH_..
values
- Create local environment file
- Setup
- Install packages
npm install
- Install packages
- Run
- Start web server:
npm start
(http://localhost:3000)
- Start web server:
- Switch to
Found an integration not working? Open an issue / Send a Pull Request with fixes.
Looking for a particular OAuth integration not yet added? Open an issue / Send a Pull Request with additional integrations.
- Atul Yadav - GitHub ยท Twitter
- [YOUR NAME HERE] - Feel free to contribute to the codebase by resolving any open issues, refactoring, adding new features, writing test cases or any other way to make the project better and helpful to the community. Feel free to fork and send pull requests.
Looking for a developer to build your next idea or need a developer to work remotely? Get in touch: [email protected]
If you liked this project, consider donating to support it โค๏ธ
Copyright (c) 2020 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)