Note: all the firebase functions that we are going to use come from firebase/auth Now let's create a new file inside src/firebase named services.ts 🔥 Creating the functions for authentication.
FIREBASE LOGIN NW.JS SCIRRA INSTALL
🔥 Configuring Firebase in our React app.īack to our React app, let's install Firebase. When you choose Google you will do the same as the previous one, and you will also have to select your email.ģ - Once the providers are enabled, it should appear in the Sign-in method tab as follows.Ĥ - In the Users tab you can see all the users that are registered in your application. When you choose email/password just click on Enable and at the end there is a save button that you must press once you finish making any modification in the provider. Press the web button to create an app (the third button with white background).Ģ - Name your app and click on Register App.ģ - Once the app is registered, we will be given our credentials, which we have to save because we are going to use them later.ġ - Now, we have to go back to the panel, in the menu on the right side there is an option that says compilation and inside there is the option authentication and you have to click on it, so it will take you to another screen.Īnd you have to click on the Start button.Ģ - Then you will be shown several providers, from which we are going to select the email/password and Google (you can choose the ones you want, although you will probably have to do more configuration). Once you continue, you will be sent to a new panel.ġ - In the new panel, you have to identify these buttons. In my case I named it auth-firebase-react.Īnd at the end there is a continue button that you must press.Ĥ - Wait for your project to finish creating and then click continue. Now we have to configure the application in firebase to be able to use its authentication service.ġ - Let's go to the firebase console, we log in with a Gmail account.Ģ - If this is the first time you are using Firebase, you will see a message and a create project button which you should press.ģ - Place the new name to the project.
We already have the design and functionality of the forms, we continue with the creation of our app in Firebase. ⚠️ Note: You can even create a single reusable component, as the forms are almost exactly the same only differing by the buttons and the handleSubmit action as this function will do something different depending on the form. We will name the project: auth-firebase-react (optional, you can name it whatever you like).Įnter fullscreen mode Exit fullscreen mode ▶️ CSS vanilla (You can find the styles in the repository at the end of this post).📌 Creating a context of our application. 📌 3 - Creating the function to observe the changes in the user authentication status. 📌 2 - Creating the function to authenticate by credentials. 📌 1 - Creating the function to authenticate by Google. 📌 Creating the functions for authentication. 📌 Configuring Firebase in our React app. ⚠️ Note: You need to have basic knowledge in React JS and hooks and TypeScript.
FIREBASE LOGIN NW.JS SCIRRA HOW TO
This time I will show you how to use Firebase service to perform authentication in your React JS application.Īny kind of feedback is welcome, thanks and I hope you enjoy the article.🤗
0 kommentar(er)
