Angular 14 Tutorial- Learn to create User With Email/Password In Angular 14 Firebase

Learn To Create a User With Email/Password In Angular 14 Firebase; In this tutorial, we will learn to create a user with an email and password in Firebase with Angular Framework.

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

We can use Firebase Authentication to let our users authenticate with Firebase using their email addresses and passwords and to manage our app’s password-based accounts.

Firebase allows us to create a fast and secure authentication system with its vast API collection.

 

This Angular guide will use AngularFire2 Library from the Node Package Manager (NPM) and the latest Angular release for this tutorial.

 

Set Up Angular App

ng new angularfirebaseproject

Our basic project will be set up after which we get into the project directory using the below command:

cd angularfirebaseproject

Now, we will generate some components in our Angular app:

ng g c sign-in
ng g c sign-up

In order to complete strict type warnings or errors, we have to set “strict”:false under compilerOptions property in the tsconfig.json file:

 

Set Up AngularFire2 Library In Angular

Here, we will set up Firebase (AngularFire2 Library) in our Angular project:

npm install firebase @angular/fire --save

Once, we have done setting up this library, we will make the connection between our Firebase account and our Angular app.

Afterward, we will go to the src/environments/environment.ts file in our project’s environment folder. Then, we need to add Firebase configuration details in the environment file:

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Here, we will create Auth Service authentication.service.ts

ng generate service shared/services/authentication

Further, we open the app.module.ts file and register the service within the file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthenticationService } from './shared/services/authentication.service';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
@NgModule({
  declarations: [AppComponent, SignInComponent, SignUpComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
  ],
  providers: [AuthenticationService],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

Generate Authenticate Service core File

Here, we will open the authentication.service.ts file and insert the following code inside the file:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) {}
  // Sign up with email/password
  SignUp(email, password) {
    return this.afAuth
      .createUserWithEmailAndPassword(email, password)
      .then((result) => {
        window.alert('You have been successfully registered!');
        console.log(result.user);
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
}

We have successfully created the authentication.service.ts file. We have used two methods using firebase createUserWithEmailAndPassword(email, password) and signInWithEmailAndPassword(email, password) APIs.

  • SignUp(email, password): In this method, a new user is created with an email and password using Firebase API with Angular.
  •  SignIn(email, password): In this method, a user is allowed to sign in with email and password.

 

Set Up Auth Components

We are going to sign up using our custom API. Then, we will go to our signup.component.ts file and add the below code in it:

import { Component } from '@angular/core';
import { AuthenticationService } from '../shared/services/authentication.service';
@Component({
  selector: 'app-sign-up',
  template: ` <div class="authBlock">
    <h3>Sign Up</h3>
    <div class="formGroup">
      <input
        type="text"
        class="formControl"
        placeholder="Username"
        #userEmail
        required
      />
    </div>
    <div class="formGroup">
      <input
        type="password"
        class="formControl"
        placeholder="Password"
        #userPassword
        required
      />
    </div>
    <div class="formGroup">
      <input
        type="button"
        class="btn btnPrimary"
        value="Sign Up"
        (click)="
          authenticationService.SignUp(userEmail.value, userPassword.value)
        "
      />
    </div>
  </div>`,
})
export class SignUpComponent {
  constructor(public authenticationService: AuthenticationService) {}
}

We are going to sign in using our custom API. We, further, go to signin.component.ts file and add the given code in it:

import { Component } from '@angular/core';
import { AuthenticationService } from '../shared/services/authentication.service';
@Component({
  selector: 'app-sign-in',
  template: ` <div class="authBlock">
    <h3>Sign Up</h3>
    <div class="formGroup">
      <input
        type="text"
        class="formControl"
        placeholder="Username"
        #userEmail
        required
      />
    </div>
    <div class="formGroup">
      <input
        type="password"
        class="formControl"
        placeholder="Password"
        #userPassword
        required
      />
    </div>
    
    <div class="formGroup">
      <input
        type="button"
        class="btn btnPrimary"
        value="Sign Up"
        (click)="
          authenticationService.SignUp(userEmail.value, userPassword.value)
        "
      />
    </div>
  </div>`,
})
export class SignInComponent {
  constructor(public authenticationService: AuthenticationService) {}
}

Make sure to evoke the auth components by adding the given tags in the app.component.ts file:

<app-sign-in></app-sign-in>
<app-sign-up></app-sign-up>

 

Conclusion

So, in this Angular tutorial, we have learned how to create user with Email/Password in Angular 14 firebase.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *