<\/span><\/h2>\n\n\n\nFirst, we need to create our Angular project. Make sure to enable routing whenever the terminal asks if you would like to add Angular routing. If you have already created it, skip this step.<\/p>\n\n\n\n
ng new angular-firebase-auth<\/code><\/pre>\n\n\n\nInstall default dependencies needed to run the Angular starter project.<\/p>\n\n\n\n
npm i<\/code><\/pre>\n\n\n\nWe need to install other packages needed for our application.<\/p>\n\n\n\n
npm i --save bootstrap @angular\/fire firebase<\/code><\/pre>\n\n\n\nTo make sure we are using bootstrap CSS library, we are going to open angular.json file and add the bootstrap.css file path to be part of the styles property of the build <\/code>configuration.<\/p>\n\n\n\n\"build\": {\n \"builder\": \"@angular-devkit\/build-angular:browser\",\n \"options\": {\n \"outputPath\": \"dist\/angular-firebase-auth-test-two\",\n \"index\": \"src\/index.html\",\n \"main\": \"src\/main.ts\",\n \"polyfills\": \"src\/polyfills.ts\",\n \"tsConfig\": \"tsconfig.app.json\",\n \"aot\": true,\n \"assets\": [\n \"src\/favicon.ico\",\n \"src\/assets\"\n ],\n \"styles\": [\n \"src\/styles.scss\",\n \".\/node_modules\/bootstrap\/dist\/css\/bootstrap.css\"\n ],\n \"scripts\": []\n },\n \"configurations\": {\n \"production\": {\n \"fileReplacements\": [\n {\n \"replace\": \"src\/environments\/environment.ts\",\n \"with\": \"src\/environments\/environment.prod.ts\"\n }\n ],\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"namedChunks\": false,\n \"extractLicenses\": true,\n \"vendorChunk\": false,\n \"buildOptimizer\": true,\n \"budgets\": [\n {\n \"type\": \"initial\",\n \"maximumWarning\": \"2mb\",\n \"maximumError\": \"5mb\"\n },\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"6kb\",\n \"maximumError\": \"10kb\"\n }\n ]\n }\n }\n },<\/code><\/pre>\n\n\n\nWe are going to add Angular Material. Therefore, we are going to run the following command:<\/p>\n\n\n\n
ng add @angular\/material<\/code><\/pre>\n\n\n\nOnce you do so, it will ask you the following questions in the terminal.<\/p>\n\n\n\n
Choose a prebuilt theme name, or \"custom\" for a custom theme:\nSet up global Angular Material typography styles?\nSet up browser animations for Angular Material?<\/code><\/pre>\n\n\n\nSelect any prebuilt theme. Also, select Yes to set global Angular Material Typography as well as browser animations for Angular Material.<\/p>\n\n\n\n
As you noticed, we installed Bootstrap and Angular Material as we are going to leverage the UI Material Design components and Bootstrap utilities to speed up the development process and have a nice UI interface without spending too much time on adding custom styling to our app. However, installing the @angular\/fire and firebase packages is a requirement to wire up firebase authentication with our signup page.<\/p>\n\n\n\n
Open the environment.ts file and add the firebase configuration.<\/p>\n\n\n\nAdd Firebase Configuration in the environment.ts file<\/figcaption><\/figure>\n\n\n\nNote<\/strong>: It is recommended to create at least two separate firebase projects: One for production environments and one for development environment. If you have more environments, it is recommended to create one firebase project per each environment.<\/p>\n\n\n\n<\/span>Create Sign Up Page<\/span><\/h2>\n\n\n\nWe are going to create a module for the signup page, so in your terminal, run the following command.<\/p>\n\n\n\n
Note: Make sure you are in the root folder of your project when executing these commands from your terminal.<\/p>\n\n\n\n
ng generate module pages\/signup<\/code><\/pre>\n\n\n\nThen, create the SignupComponent.<\/p>\n\n\n\n
ng generate component pages\/signup<\/code><\/pre>\n\n\n\nNow it\u2019s time to update the routes to navigate to the signup page. Open the app-routing.module.ts file and add a new route to the routes variable:<\/p>\n\n\n\n
const routes: Routes = [\n {\n path: 'signup',\n loadChildren: () =>\n import('.\/..\/app\/pages\/signup\/signup.module').then(\n (module) => module.SignupModule\n ),\n },\n ];<\/code><\/pre>\n\n\n\nOpen the signup.module.ts file and add the RouterModule as part of the Module\u2019s imports. This is with the purpose of setting up the component to be used when navigating to the \/signup<\/code> page. Go ahead and add the FormsModule and ReactiveFormsModule as we will use them to create our signup form. Also, we are going to add some Angular Material modules as we will use them in our template.<\/p>\n\n\n\nimport { NgModule } from '@angular\/core';\n import { CommonModule } from '@angular\/common';\n import { FormsModule, ReactiveFormsModule } from '@angular\/forms';\n import { RouterModule } from '@angular\/router';\n import { MatCardModule } from '@angular\/material\/card';\n import { MatCommonModule } from '@angular\/material\/core';\n import { MatButtonModule } from '@angular\/material\/button';\n import { MatInputModule } from '@angular\/material\/input';\n import { MatToolbarModule } from '@angular\/material\/toolbar';\n import { MatIconModule } from '@angular\/material\/icon';\n import { MatSnackBarModule } from '@angular\/material\/snack-bar';\n import { SignupComponent } from '.\/signup.component';\n @NgModule({\n declarations: [\n SignupComponent\n ],\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n MatCommonModule,\n MatButtonModule,\n MatInputModule,\n MatToolbarModule,\n MatIconModule,\n MatSnackBarModule,\n MatCardModule,\n RouterModule.forChild([{ path: '', component: SignupComponent }]),\n ]\n })\n export class SignupModule { }<\/code><\/pre>\n\n\n\n<\/span>Create the Form<\/span><\/h2>\n\n\n\nIn this tutorial we are going to use Reactive Driven forms. That\u2019s the reason we included the ReactiveFormsModule in the previous step. Feel free to use Template Driven forms if that approach fits your project best. If you decide to do so, remove the ReactiveFormsModule from the SignupModule to avoid importing unnecessary modules.<\/p>\n\n\n\n
Open the signup.component.ts file. Since we are going to generate the form, we need to inject the FormBuilder. Also, we need to set a form property for the SignupComponent class.<\/p>\n\n\n\n
form: FormGroup;\nconstructor(private fb: FormBuilder) { }<\/code><\/pre>\n\n\n\nGenerate the form and set the validators for the controls our form will have during the ngOnInit lifecycle hook. We are going to need username, email, and password form controls.<\/p>\n\n\n\n
ngOnInit(): void {\n this.form = this.fb.group({\n username: ['', [Validators.required, Validators.minLength(6)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(6)]],\n });\n }<\/code><\/pre>\n\n\n\nAs a recommendation, it is better to create a method that generates the form or sets the form group and call that method during ngOnInit <\/strong>lifecycle hook. We are helping our code to keep it clean. In my case, I decided to call my method generateForm<\/strong>. Add accessors for each of the form controls we added to our form (username, email and password).<\/p>\n\n\n\nconst routes: Routes = [\nimport { Component, OnInit } from '@angular\/core';\n import { FormBuilder, FormControl, FormGroup, Validators } from '@angular\/forms';\n @Component({\n selector: 'app-signup',\n templateUrl: '.\/signup.component.html',\n styleUrls: ['.\/signup.component.scss']\n })\n export class SignupComponent implements OnInit {\n form: FormGroup;\n get usernameControl() {\n return this.form.get('username') as FormControl;\n }\n get passwordControl() {\n return this.form.get('password') as FormControl;\n }\n get emailControl() {\n return this.form.get('email') as FormControl;\n }\n constructor(private fb: FormBuilder) { }\n ngOnInit(): void {\n this.generateForm();\n }\n generateForm() {\n this.form = this.fb.group({\n username: ['', [Validators.required, Validators.minLength(6)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(6)]],\n });\n }\n }<\/code><\/pre>\n\n\n\nOpen the SignupComponent template and create the form. Since I have done the heavy lifting for you, you can copy and paste the following html to your signup.component.html file.<\/p>\n\n\n\n
<div class=\"d-flex justify-content-center h-100\">\n <div class=\"d-flex align-items-center\">\n <mat-card>\n <mat-card-content class=\"p-4\">\n <form [formGroup]=\"form\" *ngIf=\"form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"row\">\n <mat-form-field class=\"w-100\">\n <mat-label>Username<\/mat-label>\n <input matInput type=\"text\" [formControl]=\"usernameControl\" \/>\n <ng-container *ngIf=\"usernameControl.invalid\">\n <mat-error *ngIf=\"usernameControl.required\">\n You must enter your username\n <\/mat-error>\n <mat-error *ngIf=\"usernameControl.minlength\">\n Username should have at least 6 alhphanumeric characters\n <\/mat-error>\n <\/ng-container>\n <\/mat-form-field>\n <\/div>\n \n <div class=\"row\">\n <mat-form-field class=\"w-100\">\n <mat-label>Email<\/mat-label>\n <input matInput type=\"text\" [formControl]=\"emailControl\" \/>\n <mat-error *ngIf=\"emailControl.invalid\">\n You must enter your email\n <\/mat-error>\n <\/mat-form-field>\n <\/div>\n \n <div class=\"row\">\n <mat-form-field class=\"w-100\">\n <mat-label>Password<\/mat-label>\n <input matInput type=\"password\" [formControl]=\"passwordControl\" \/>\n <ng-container *ngIf=\"usernameControl.invalid\">\n <mat-error *ngIf=\"passwordControl.required\">\n You must enter the password\n <\/mat-error>\n <mat-error *ngIf=\"passwordControl.minlength\">\n Username should have at least 6 alhphanumeric characters\n <\/mat-error>\n <\/ng-container>\n <\/mat-form-field>\n <\/div>\n \n <div class=\"text-center\">\n <button\n mat-raised-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"!form.valid\"\n >\n Sign Up\n <\/button>\n <\/div>\n <\/form>\n <\/mat-card-content>\n <\/mat-card>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\nRun your Angular app using the following command if you are relatively new to Angular.<\/p>\n\n\n\n
npm run start<\/code><\/pre>\n\n\n\nOpen the browser and navigate to the signup page. If you are using the default port used for Angular projects, the URL will be http:\/\/localhost:4200\/signup. Play around with the interface (there is not too much to play besides filling up a form) and check validations are correctly triggered in the signup form.<\/p>\n\n\n\n
Signup Page in the localhost <\/figcaption><\/figure><\/div>\n\n\n\nNow we are going to wire up the signup process with firebase. For the next step, we are going to create an AuthService <\/strong>by running the following command.<\/p>\n\n\n\nng generate service shared\/auth\/auth<\/code><\/pre>\n\n\n\nOpen the auth.service.ts file and inject AngularFireAuth.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport { AngularFireAuth } from '@angular\/fire\/auth';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class AuthService {\n \n constructor(\n private firebaseAuth: AngularFireAuth,\n ) { }\n}<\/code><\/pre>\n\n\n\nBefore we set up our request to signup, we need to import AngularFireModule and also set up the firebase configuration using the config values we got from firebase that we stored in the environment.ts file. Open the app.module.ts file and add the following line of code as part of the imports required for the module.<\/p>\n\n\n\n
AngularFireModule.initializeApp(environment.firebaseConfig)<\/code><\/pre>\n\n\n\nThe app.module.ts file should look like the following:<\/p>\n\n\n\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\nimport { environment } from '.\/..\/environments\/environment';\nimport { AngularFireModule } from '@angular\/fire';\n \nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\n \n@NgModule({\n declarations: [\n AppComponent,\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n BrowserAnimationsModule,\n AngularFireModule.initializeApp(environment.firebaseConfig),\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n\nThen we are going to set up our signUp method. The signUp method is a request to our Firebase Authentication to create a new user for our project.<\/p>\n\n\n\n
signUp(email: string, password: string, username: string) {\n return this.firebaseAuth.createUserWithEmailAndPassword(email, password)\n }<\/code><\/pre>\n\n\n\nThe last thing we need to do is to wire up the actual signup process. Therefore, we are going to inject the AuthService in our SignupComponent. As a way to notify whether or not the user successfully signed up or not, we are going to use Angular Material Snackbars to display notifications if the process has succeeded or failed. Therefore, we need to inject MatSnackBar to the SignupComponent.<\/p>\n\n\n\n
\/\/ add the following two imports\nimport { MatSnackBar } from '@angular\/material\/snack-bar';\nimport { AuthService } from 'src\/app\/shared\/auth\/auth.service';\n\nexport class SignupComponent implements OnInit {\n constructor(\n private fb: FormBuilder,\n private authService: AuthService,\n private snackBar: MatSnackBar\n ) { }<\/code><\/pre>\n\n\n\nAlso, we are going to generate a new method in the SignupComponent to make the signup request from the AuthService once the user submits the form. Since we defined in the template that the method onSubmit <\/strong>is going to be triggered during the form submission, we are going to name our method onSubmit <\/strong>in our component file.<\/p>\n\n\n\n\/\/ this is the configuration we have in the signup.component.html file\n(ngSubmit)=\"onSubmit()\"<\/code><\/pre>\n\n\n\nThe method should look like this:<\/p>\n\n\n\n
onSubmit() {\n this.authService.signUp(\n this.emailControl.value,\n this.passwordControl.value,\n this.usernameControl.value\n ).then(\n () => {\n this.snackBar.open('You signed up to this app!');\n })\n .catch(\n (err) => {\n this.snackBar.open('There was a problem while trying to sign up a new user');\n });\n }<\/code><\/pre>\n\n\n\nNote: Feel free to modify the logic once the request is made. Usually, the new user is redirected to a new page such as the dashboard or main page. To redirect to a new page, you can inject the Router and use the navigate <\/strong>method.<\/p>\n\n\n\n<\/span>Time to Test<\/span><\/h2>\n\n\n\nThe wait is over. We have done everything described in the tutorial, we followed step-by-step the process of setting up the signup page with Angular and Firebase Authentication. Now, it is time to test. Try signing up a new user on the signup page, and check if the new user has successfully signed up.<\/p>\n\n\n\n
Testing Sign Up Page<\/figcaption><\/figure><\/div>\n\n\n\nIf you noticed, you received a successful notification. That means you successfully signed up for the app. In order to verify I\u2019m not making stuff up, open your firebase project in https:\/\/console.firebase.google.com\/ and navigate to the Authentication page. You will see all the users who have signed up for your application.<\/p>\n\n\n\n
Verifying new users in Firebase Authentication Dashboard<\/figcaption><\/figure><\/div>\n\n\n\n<\/span>Attempt to Sign Up with an existing registered Email<\/span><\/h2>\n\n\n\nNote: if you try to signup with an email you have previously used, you will see an error message. Firebase Authentication won\u2019t allow multiple users with the same email.<\/p>\n\n\n\n
Attempting to Sign Up with the same User<\/figcaption><\/figure><\/div>\n\n\n\n<\/span>Wrapping Up<\/span><\/h2>\n\n\n\nCongratulations! Now you know how to integrate a signup page using Firebase Authentication for your Angular projects. <\/p>\n\n\n\n
How was this tutorial?<\/strong><\/p>\n\n\n\nIf you liked this tutorial, share it with other developers who are learning Angular and Firebase. Stay connected with me by following the different social media channels available at becomebetterprogrammer.<\/p>\n\n\n\n\n