Giter Club home page Giter Club logo

firebase-discord-oauth2-example's Introduction

Discord OAuth2 Flow with Firebase

see it in action here!

Firebase provides great structure to create your own authentication system. However, the default providers list for external log-ins (oAuth2) is limited.

I'm a big fan of Discord and so here is a sample Firebase app that uses the Discord oAuth2 to create users in our Firebase Authentication and our Firestore database.

Please read the Disclaimer below if you have any issues.

If you need any help or assistance open an issue/pull request here on GitHub.

A brief summary of the process:

  1. User heads to /api/login and is redirected to Discord
  2. User signs in with their Discord credentials and authorizes our app
  3. Discord returns the user information to our /api/auth callback URI
  4. Using the information returned, we create Firebase user object in the Authentication tab
  5. A document in a Firestore database is also created inside a users collection

How to Run

Setting up Discord

  1. Go to the Discord Developer Portal
  2. Create an application
  3. Make note of your Client ID and Client Secret
  4. Go into the OAuth2 tab and add the following redirect URIs:
  • https://us-central1-<project-id>.cloudfunctions.net/api
  • https://us-central1-<project-id>.cloudfunctions.net/api/auth
  1. hit save!
  2. Make note of the scopes you want from the bottom of the page

Setting Up Firebase

  1. Go to the Firebase Console
  2. Create your project and head to the Authentcation tab
  3. Enable Email/Password authentication
  4. Go to the Database tab and enable Firestore Cloud storage, more info on how to do this here
  5. Click the settings gear next to Project Overview and select Web, add a nickname and get your Config object. If you are unsure what to do, follow the steps linked here.

Setting up our Code

  1. Open the info.js folder inside the functions folder and replace all information in there with the information you got from Discord/Firebase
  2. Open the .firebasesrc file and fill in your project name. Note: if you do not see this file you must enable the visibility of hidden files on your operating system
  3. CD into the functions folder and say npm install to install al necessary packages
  4. Make sure you have Firebase Tools installed globally by saying npm install -g firebase-tools
  5. Inside your project directory say firebase deploy
  6. You should be prompted to login with Google, make sure you use the same account you used to setup your Firebase project in the steps above
  7. Your project should be live! Go to https://us-central1-<project-id>.cloudfunctions.net/api/login to see it in action
  8. Head over to Firebase and check out your users being added to the Authentication Tab
  9. Head over to your Firestore Database and notice how we store additional user information that the Firebase authentication system does not let us store, for example, a user's profile picture, joined servers, and more.

Notes:

If you are getting errors because of your redirect URL, check that the URL listed in your Discord Developer Portal matches the URL of your project.

firebase-discord-oauth2-example's People

Contributors

luizkc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.