๐ OAuth 2.0 implementation for various providers in one place.
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:
Actual steps implemented in this sample code repository:
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.
Valid OAuth Redirect URI
as https://example.com/authorize/
(replace your actual domain for live)App ID
and App Secret
web/.env.local
REACT_APP_OAUTH_FACEBOOK_ID
with App ID
api/.env.local
OAUTH_FACEBOOK_ID
with App ID
api/.env.local
OAUTH_FACEBOOK_SECRET
with App Secret
External
(Available to any user with a Google Account.)Authorized domains
input enter example.com
Application Name
and click Save
button+ CREATE CREDENTIALS
buttonOAuth client ID
Web application
Authorized redirect URIs
, fill in following two entries:
https://example.com/authorize/
http://localhost:3000/authorize/
Your Client ID
and Your Client Secret
web/.env.local
REACT_APP_OAUTH_GOOGLE_ID
with Your Client ID
api/.env.local
OAUTH_GOOGLE_ID
with Your Client ID
api/.env.local
OAUTH_GOOGLE_SECRET
with Your 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
as https://example.com/authorize/
Deauthorize Callback URL
as https://example.com/authorize/instagram-deauthorize
Data Deletion Request URL
as https://example.com/authorize/instagram-delete
Goto App โ Products โ Basic Display โ Roles โ Roles and click on Add Instagram Testers
, search for your account and click on Submit
Accept the tester invite https://www.instagram.com/accounts/manage_access/
Goto App โ Products โ Basic Display and copy Instagram App ID
and Instagram App Secret
Update web/.env.local
REACT_APP_OAUTH_INSTAGRAM_ID
with Instagram App ID
Update api/.env.local
OAUTH_INSTAGRAM_ID
with Instagram App ID
Update api/.env.local
OAUTH_INSTAGRAM_SECRET
with Instagram App Secret
Note:
localhost:3000
as valid callback URI. So while testing, you may need to manually change the callback URL.App Review for Instagram Basic Display
by submitting instagram_graph_user_profile
and instagram_graph_user_media
for review.App name
enter your application name, eg: Example
Company
select an existing or create new company pageApp logo
upload a logoCreate app
buttonRedirect URLs
, fill in following two entries:
http://localhost:3000/authorize/
https://example.com/authorize/
Client ID
and Client Secret
web/.env.local
REACT_APP_OAUTH_LINKEDIN_ID
with Client ID
api/.env.local
OAUTH_LINKEDIN_ID
with Client ID
api/.env.local
OAUTH_LINKEDIN_SECRET
with Client Secret
Project name
enter your project name, eg: Example
Project use
select appropriate use-caseApp environment
select Development
App name
enter your application name, eg: Example
App Setting
buttonSetup
buttonOAuth 2.0
Callback URI / Redirect URL
, fill in following two entries:
http://localhost:3000/authorize/
https://example.com/authorize/
Website URL
Save
buttonKeys and token
https://developer.twitter.com/en/portal/projects/<PROJECT_ID>/apps/<APP_ID>/keys OAuth 2.0 Client ID and Client Secret section
web/.env.local
REACT_APP_OAUTH_TWITTER_ID
with Client ID
api/.env.local
OAUTH_TWITTER_ID
with Client ID
api/.env.local
OAUTH_TWITTER_SECRET
with Client Secret
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
:
http://localhost:3000/authorize/
https://example.com/authorize/
create app
buttonid
(below the entered app name) and secret
web/.env.local
REACT_APP_OAUTH_REDDIT_ID
with id
api/.env.local
OAUTH_REDDIT_ID
with id
api/.env.local
OAUTH_REDDIT_SECRET
with secret
New Application
name
, eg: Example
and click on Create
buttonRedirects
, create following two entries:
http://localhost:3000/authorize/
for developmenthttps://example.com/authorize/
for productionCLIENT ID
(below the entered app name) and CLIENT SECRET
web/.env.local
REACT_APP_OAUTH_DISCORD_ID
with CLIENT ID
api/.env.local
OAUTH_DISCORD_ID
with CLIENT ID
api/.env.local
OAUTH_DISCORD_SECRET
with CLIENT SECRET
Create
button and fill in following:
Name
enter your application name, eg: Example
User-managed app
Redirect URL for OAuth
, enter following:
http://localhost:3000/authorize/
https://example.com/authorize/
Whitelist URL
, enter following:
http://localhost:3000
https://example.com
+ Add scopes
User
user:read
and user_profile
Information
like Short Description
, Developer Contact Information
, etc.Client ID
and Client Secret
web/.env.local
REACT_APP_OAUTH_ZOOM_ID
with Client ID
api/.env.local
OAUTH_ZOOM_ID
with Client ID
api/.env.local
OAUTH_ZOOM_SECRET
with Client Secret
Application name
enter your application name, eg: Example
Homepage URL
enter your website url, eg: https://example.com
Authorization callback URL
:
http://localhost:3000/authorize/
https://example.com/authorize/
Client ID
and Client Secret
web/.env.local
REACT_APP_OAUTH_GITHUB_ID
with Client ID
api/.env.local
OAUTH_GITHUB_ID
with Client ID
api/.env.local
OAUTH_GITHUB_SECRET
with Client Secret
Name
enter your application name, eg: Example
Homepage URL
enter your website url, eg: https://example.com
Authorization callback URL
enter http://localhost:3000/authorize/
and on new line https://example.com/authorize/
Scopes
check read_user
, profile
and email
Save application
button and copy Application ID
and Secret
web/.env.local
REACT_APP_OAUTH_GITLAB_ID
with Application ID
api/.env.local
OAUTH_GITLAB_ID
with Application ID
api/.env.local
OAUTH_GITLAB_SECRET
with Secret
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
:
http://localhost:3000/authorize/
https://example.com/authorize/
Save
buttonClient ID
and Client Secret
web/.env.local
REACT_APP_OAUTH_DIGITALOCEAN_ID
with Client ID
api/.env.local
OAUTH_DIGITALOCEAN_ID
with Client ID
api/.env.local
OAUTH_DIGITALOCEAN_SECRET
with Client Secret
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
:
http://localhost:3000/authorize/
https://example.com/authorize/
Permissions โ Account
check Email
and Read
Save
buttonKey
and Secret
web/.env.local
REACT_APP_OAUTH_BITBUCKET_ID
with Key
api/.env.local
OAUTH_BITBUCKET_ID
with Key
api/.env.local
OAUTH_BITBUCKET_SECRET
with Secret
Name
enter your application name, eg: Example
Supported account types
choose Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
Redirect URI
:
http://localhost:3000/authorize/
https://example.com/authorize/
Client secrets
click on + New client secret
Description
, eg: Example Secret Key
Expires
choose Never
Add
button and copy the Secret
valueApplication (client) ID
and Secret
web/.env.local
REACT_APP_OAUTH_AZURE_ID
with Application (client) ID
api/.env.local
OAUTH_AZURE_ID
with Application (client) ID
api/.env.local
OAUTH_AZURE_SECRET
with Secret
OAUTH_AZURE_TENANT
as per your requirement.App or Hardware Name
enter your application name, eg: Example
App or Hardware Description
enter your application name, eg: Example OAuth app
Edit settings
Redirect URIs
make following entries:
http://localhost:3000/authorize/
https://example.com/authorize/
Client ID
and Client Secret
web/.env.local
REACT_APP_OAUTH_SPOTIFY_ID
with Client ID
api/.env.local
OAUTH_SPOTIFY_ID
with Client ID
api/.env.local
OAUTH_SPOTIFY_SECRET
with Client Secret
App name
enter your application name, eg: Example
App URL
enter your application URL, eg: https://example.com
Whitelisted redirection URL(s)
make following entries:
http://localhost:3000/authorize/
https://example.com/authorize/
API key
and API secret key
web/.env.local
REACT_APP_OAUTH_SHOPIFY_ID
with API key
web/.env.local
REACT_APP_OAUTH_SHOPIFY_STORE
with your test store IDapi/.env.local
OAUTH_SHOPIFY_ID
with API key
api/.env.local
OAUTH_SHOPIFY_SECRET
with API secret key
api/.env.local
OAUTH_SHOPIFY_STORE
with your test store IDoauth
โโโ api
โ > PORT 4000
โ > localhost:4000
โ > api.example.com
โ
โโโ web
โ > PORT 3000
โ > localhost:3000
โ > example.com
โ
โโโ README.md (you are here)
Prerequisites
v12.x
)v4.x
)Clone repository git clone [email protected]:atulmy/oauth.git oauth
API
api
directory cd oauth/api
cp .env.dev .env.local
.env.local
for SECURITY_SECRET
, DATABASE_URL
and OAUTH_..
valuesnpm install
npm start
(http://localhost:4000)Web
web
directory cd oauth/web
cp .env.dev .env.local
.env.local
for REACT_APP_OAUTH_..
valuesnpm install
npm start
(http://localhost:3000)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.
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)