OAuth

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.

Integrations

Social platforms

Tech platforms

Docs

Facebook

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 as https://example.com/authorize/ (replace your actual domain for live)
Goto App → Settings and copy App ID and App Secret
Update web/.env.local REACT_APP_OAUTH_FACEBOOK_ID with App ID
Update api/.env.local OAUTH_FACEBOOK_ID with App ID
Update api/.env.local OAUTH_FACEBOOK_SECRET with App Secret

↑ all integrations

Google

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
1. Choose External (Available to any user with a Google Account.)
2. In Authorized domains input enter example.com
3. Fill in Application Name and click Save button
Create Credentials https://console.cloud.google.com/apis/credentials
1. Click on + CREATE CREDENTIALS button
2. Choose OAuth client ID
3. Select Web application
4. For Authorized redirect URIs, fill in following two entries:
  1. https://example.com/authorize/
  2. http://localhost:3000/authorize/
Copy Your Client ID and Your Client Secret
Update web/.env.local REACT_APP_OAUTH_GOOGLE_ID with Your Client ID
Update api/.env.local OAUTH_GOOGLE_ID with Your Client ID
Update api/.env.local OAUTH_GOOGLE_SECRET with Your Client Secret

↑ all integrations

Instagram

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
1. Valid OAuth Redirect URIs as https://example.com/authorize/
2. Deauthorize Callback URL as https://example.com/authorize/instagram-deauthorize
3. 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:
1. 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.
2. For production, you need to complete App Review for Instagram Basic Display by submitting instagram_graph_user_profile and instagram_graph_user_media for review.

↑ all integrations

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:
1. App name enter your application name, eg: Example
2. Company select an existing or create new company page
3. App logo upload a logo
Click on Create app button
Goto App → Auth
1. Under Redirect URLs, fill in following two entries:
  1. http://localhost:3000/authorize/
  2. https://example.com/authorize/
2. Copy Client ID and Client Secret
Update web/.env.local REACT_APP_OAUTH_LINKEDIN_ID with Client ID
Update api/.env.local OAUTH_LINKEDIN_ID with Client ID
Update api/.env.local OAUTH_LINKEDIN_SECRET with Client Secret

↑ all integrations

Twitter

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:
1. Project name enter your project name, eg: Example
2. 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:
1. App environment select Development
2. App name enter your application name, eg: Example
3. Click on App Setting button
4. Under User authentication settings on Setup button
5. Enable OAuth 2.0
6. Under Callback URI / Redirect URL, fill in following two entries:
  1. http://localhost:3000/authorize/
  2. https://example.com/authorize/
7. Enter Website URL
8. 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
1. Update web/.env.local REACT_APP_OAUTH_TWITTER_ID with Client ID
2. Update api/.env.local OAUTH_TWITTER_ID with Client ID
3. Update api/.env.local OAUTH_TWITTER_SECRET with Client Secret

↑ all integrations

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:
1. name enter your application name, eg: Example
2. description enter info about your app, eg: OAuth example application
3. about url enter your website url, eg: https://example.com
4. redirect uri:
  1. For development, enter http://localhost:3000/authorize/
  2. For production, enter https://example.com/authorize/
Click on create app button
Copy id (below the entered app name) and secret
Update web/.env.local REACT_APP_OAUTH_REDDIT_ID with id
Update api/.env.local OAUTH_REDDIT_ID with id
Update api/.env.local OAUTH_REDDIT_SECRET with secret

↑ all integrations

Discord

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 on Create button
Go to application's OAuth section https://discord.com/developers/applications/CLIENT_ID/oauth2 and for Redirects, create following two entries:
1. http://localhost:3000/authorize/ for development
2. https://example.com/authorize/ for production
Copy CLIENT ID (below the entered app name) and CLIENT SECRET
Update web/.env.local REACT_APP_OAUTH_DISCORD_ID with CLIENT ID
Update api/.env.local OAUTH_DISCORD_ID with CLIENT ID
Update api/.env.local OAUTH_DISCORD_SECRET with CLIENT SECRET

↑ all integrations

Zoom

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:
1. Name enter your application name, eg: Example
2. Select User-managed app
Under Redirect URL for OAuth, enter following:
1. For development, enter http://localhost:3000/authorize/
2. For production, enter https://example.com/authorize/
Under Whitelist URL, enter following:
1. For development, enter http://localhost:3000
2. For production, enter https://example.com
Goto Your App → Scopes and click on + Add scopes
1. Select User
2. Check user:read and user_profile
Fill in required fields under Information like Short Description, Developer Contact Information, etc.
Copy Client ID and Client Secret
Update web/.env.local REACT_APP_OAUTH_ZOOM_ID with Client ID
Update api/.env.local OAUTH_ZOOM_ID with Client ID
Update api/.env.local OAUTH_ZOOM_SECRET with Client Secret

↑ all integrations

GitHub

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:
1. Application name enter your application name, eg: Example
2. Homepage URL enter your website url, eg: https://example.com
3. Authorization callback URL:
  1. For development, enter http://localhost:3000/authorize/
  2. For production, enter https://example.com/authorize/
Copy Client ID and Client Secret
Update web/.env.local REACT_APP_OAUTH_GITHUB_ID with Client ID
Update api/.env.local OAUTH_GITHUB_ID with Client ID
Update api/.env.local OAUTH_GITHUB_SECRET with Client Secret

↑ all integrations

GitLab

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:
1. Name enter your application name, eg: Example
2. Homepage URL enter your website url, eg: https://example.com
3. Authorization callback URL enter http://localhost:3000/authorize/ and on new line https://example.com/authorize/
For Scopes check read_user, profile and email
Click on Save application button and copy Application ID and Secret
Update web/.env.local REACT_APP_OAUTH_GITLAB_ID with Application ID
Update api/.env.local OAUTH_GITLAB_ID with Application ID
Update api/.env.local OAUTH_GITLAB_SECRET with Secret

↑ all integrations

DigitalOcean

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:
1. Name enter your application name, eg: Example
2. Homepage URL enter your website url, eg: https://example.com
3. Description enter info about your app, eg: OAuth example application
4. Authorization callback URL:
  1. For development, enter http://localhost:3000/authorize/
  2. For production, enter https://example.com/authorize/
Click on Save button
Click on More → View and copy Client ID and Client Secret
Update web/.env.local REACT_APP_OAUTH_DIGITALOCEAN_ID with Client ID
Update api/.env.local OAUTH_DIGITALOCEAN_ID with Client ID
Update api/.env.local OAUTH_DIGITALOCEAN_SECRET with Client Secret

↑ all integrations

Bitbucket

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:
1. Name enter your application name, eg: Example
2. Homepage URL enter your website url, eg: https://example.com
3. Description enter info about your app, eg: OAuth example application
4. Callback URL:
  1. For development, enter http://localhost:3000/authorize/
  2. For production, enter https://example.com/authorize/
Under Permissions → Account check Email and Read
Click on Save button
Click on Name of your application and copy Key and Secret
Update web/.env.local REACT_APP_OAUTH_BITBUCKET_ID with Key
Update api/.env.local OAUTH_BITBUCKET_ID with Key
Update api/.env.local OAUTH_BITBUCKET_SECRET with Secret

↑ all integrations

Azure

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:
1. Name enter your application name, eg: Example
2. Supported account types choose Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
3. Redirect URI:
  1. For development, enter http://localhost:3000/authorize/
  2. For production, enter https://example.com/authorize/
Goto Dashboard → App → Certificates & secrets and under Client secrets click on + New client secret
1. Enter Description, eg: Example Secret Key
2. For Expires choose Never
Click on Add button and copy the Secret value
Click on Name of your application and copy Application (client) ID and Secret
Update web/.env.local REACT_APP_OAUTH_AZURE_ID with Application (client) ID
Update api/.env.local OAUTH_AZURE_ID with Application (client) ID
Update api/.env.local OAUTH_AZURE_SECRET with Secret
Optionally, change OAUTH_AZURE_TENANT as per your requirement.

↑ all integrations

Spotify

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:
1. App or Hardware Name enter your application name, eg: Example
2. 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:
1. For development, enter http://localhost:3000/authorize/
2. For production, enter https://example.com/authorize/
Copy Client ID and Client Secret
Update web/.env.local REACT_APP_OAUTH_SPOTIFY_ID with Client ID
Update api/.env.local OAUTH_SPOTIFY_ID with Client ID
Update api/.env.local OAUTH_SPOTIFY_SECRET with Client Secret

↑ all integrations

Shopify

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:
1. App name enter your application name, eg: Example
2. App URL enter your application URL, eg: https://example.com
3. For Whitelisted redirection URL(s) make following entries:
  1. For development, enter http://localhost:3000/authorize/
  2. For production, enter https://example.com/authorize/
Create a store https://partners.shopify.com/PARTNER_ID/stores for testing
Copy API key and API secret key
Update web/.env.local REACT_APP_OAUTH_SHOPIFY_ID with API key
Update web/.env.local REACT_APP_OAUTH_SHOPIFY_STORE with your test store ID
Update api/.env.local OAUTH_SHOPIFY_ID with API key
Update api/.env.local OAUTH_SHOPIFY_SECRET with API secret key
Update api/.env.local OAUTH_SHOPIFY_STORE with your test store ID

↑ all integrations

Core Structure

oauth
  ├── api
  │   > PORT 4000
  │   > localhost:4000
  │   > api.example.com
  │
  ├── web
  │   > PORT 3000
  │   > localhost:3000
  │   > example.com
  │
  └── README.md (you are here)

↑ back to top

Setup and Running

Prerequisites
- Node (v12.x)
- MongoDB (v4.x)
- IDE (Webstorm / Visual Studio Code)
Clone repository git clone git@github.com:prodev880110/oauth.git oauth
API
- Switch to api directory cd oauth/api
- Configuration
  - Create local environment file cp .env.dev .env.local
  - Edit .env.local for SECURITY_SECRET, DATABASE_URL and OAUTH_.. values
- Setup
  - Install packages npm install
- Run
  - Start API server: npm start (http://localhost:4000)
Web
- Switch to web directory cd oauth/web
- Configuration
  - Create local environment file cp .env.dev .env.local
  - Edit .env.local for REACT_APP_OAUTH_.. values
- Setup
  - Install packages npm install
- Run
  - Start web server: npm start (http://localhost:3000)

↑ back to top

Contribution

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.

Authors

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

Community reviews

Hire me

Looking for a developer to build your next idea or need a developer to work remotely? Get in touch: jack.dev880110@gmail.com

Donate

If you liked this project, consider donating to support it ❤️

License

The MIT License (http://www.opensource.org/licenses/mit-license.php)

prodev880110/oauth

OAuth

Integrations

Social platforms

Tech platforms

Other platforms

Docs

Facebook

Google

Instagram

LinkedIn

Twitter

Reddit

Discord

Zoom

GitHub

GitLab

DigitalOcean

Bitbucket

Azure

Spotify

Shopify

Core Structure

Setup and Running

Contribution

Authors

Community reviews

Hire me

Donate

License