![]() ![]() (Side Note: If you're using a custom domain, add that under authorized domain which you can find right below these providers).Īlright, our Auth Providers are set up! So now, we can go ahead and grab our firebase SDK config. (Note: You need a dev account in Twitter and GitHub before you can add them as OAuth providers). In my case, I chose: Google, Twitter, and GitHub. Ok, so while we're waiting for our dependencies, we can go ahead to firebase console, set up the auth provider/s, and get our SDK config.įirst, go to firebase console, go to Authentication, and choose SignIn method.įrom there, choose the sign in method you want. Let it finish in the background while we proceed on the next step □. Npm i firebase react-firebase-hooks react-firebaseui This module contains a component that we can just import and render, that's why I said building Sign In page with Firebase is a breeze. React-firebaseui - The SignIn UI by Firebase. (This will help lessen the boilerplate we have.) React-firebase-hooks - A collection of firebase utils for common firebase operations. Once that's finished, we can cd my_login (or whatever name you choose), and install our dependencies.įirebase - The Firebase SDK we will be using for this project To start our Next.js project, open your terminal, then enter npx create-next-app my_login and wait for it to set up a Next.js Environment (you can name it whatever you want, it doesn't need to be my_login). Ok, if you're all set, let's go ahead and build a sign in page, shall we?Īlright, so the first thing we have to do is to start and initialize our next.js project, install some dependencies, and get our configs from firebase. ![]() Btw, if you want to learn Next.js and get up to speed with what it is (and why it's better than React), I have a blog about A quick introduction to Next.js which you can check out. You can then proceed to console once everything is set up.Īlso, this blog assumes you already know Next.js since we will be building the sign in page with Next.js, but if you don't, you can use React if you prefer (since the code will also be pretty much the same) or use any framework you like. After signing up, proceed to creating a Project, and then add app, and choose web. They also have a very generous free plan without requiring you a credit card, so this step will be not that of an obstacle. If you haven't yet, you can go to their page at Firebase to create an account, and start a new project. So without further ado, let's go ahead and build a Sign In Page!īefore we begin, this blog assumes you already have a Firebase account and app set up. ![]() So in this blog, we will be building a Sign In page with Firebase UI and Auth, and I'll be using Next.js here (because it's awesome, but you can also use React if you want, or other framework). This UI that I'm talking about is also the same UI used by Google throughout its Google products, which is backed by years of research on UI/UX (so yeah, we're actually standing in the shoulder of a giant, folks!) Handling Authentication and Authorization with Firebase is like a piece of cake thanks to their awesome SDK and documentation.īut that doesn't stop there, because Firebase also offers a pre-built UI for us Devs to use so that we can quickly build a sign in/sign up page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |