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. □ 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
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |