How to Setup Signup and Login Page using angular standalone components with Email verification.

1.Create component for login & signup inside app folder.In this example we have auth component..

2.Here is the code for signup ,login and otp verification page. auth.component.html

 <div>
     <form *ngIf="isSignup" class="flex flex-col justify-center items-center h-screen gap-y-4 w-full"
         [formGroup]="signUpForm" (ngSubmit)="signUp(emailVerification)">
         <div class="class text-xl font-semibold">
             SIGN UP
         </div>
         <div class="text-sm">
             already have an account ?
             <a class="link link-accent" (click)="toggle()">Login here</a>
         </div>
         <input formControlName="name" placeholder="Name*" class="input input-bordered input-md w-full max-w-xs  " />
         <input formControlName="email" placeholder="Email*" class="input input-bordered input-md w-full max-w-xs " />
         <input formControlName="username" placeholder="Username*"
             class="input input-bordered input-md w-full max-w-xs " />
         <input formControlName="company" placeholder="Company/Team*"
             class="input input-bordered input-md w-full max-w-xs " />
         <input formControlName="password" placeholder="Password*"
             class="input input-bordered input-md w-full max-w-xs " />
         <input formControlName="cpassword" placeholder="Confirm Password*"
             class="input input-bordered input-md w-full max-w-xs " />
         <button class="btn btn-outline btn-wide btn-success" (click)="signUp(emailVerification)">SIGNUP</button>
     </form>

     <form *ngIf="!isSignup" class="flex flex-col justify-center items-center h-screen gap-y-4 w-full"
         [formGroup]="loginForm">
         <div class="class text-xl font-semibold">
             LOGIN
         </div>
         <div class="text-sm">
             Do'nt have an account ?
             <a class="link link-accent" (click)="toggle()">SignUp here</a>
         </div>
         <input formControlName="username" placeholder="Username*"
             class="input input-bordered input-md w-full max-w-xs " />
         <input formControlName="password" placeholder="Password*"
             class="input input-bordered input-md w-full max-w-xs " />
         <button class="btn btn-outline btn-wide btn-success" (click)="loginUser()">LOGIN</button>
     </form>

     <ng-template #emailVerification>
         <form class="flex flex-col justify-center items-center gap-y-3 p-4">
             <div class="fs20 text-center">Verify Email</div>
             <div class="fs20 text-center">Enter Your OTP</div>
             <input formControlName="username" placeholder="enter otp*" [formControl]="formToken"
                 class="input input-bordered input-md w-full max-w-xs " />
             <button class="btn btn-outline btn-wide btn-success" (click)="verify()">VERIFY</button>
         </form>
     </ng-template>
 </div>

auth.components.ts

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { Router, RouterModule } from '@angular/router';
import { MaterialModule } from '../common/material.module';
import { AuthService } from '../services/auth.service';

@Component({
  standalone: true,
  imports: [
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    MaterialModule,
    HttpClientModule,
  ],
  providers: [MatDialog],
  selector: 'web-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss'],
})
export class AuthComponent {
  public isSignup = false;
  public formToken: FormControl;
  public signUpForm: FormGroup;
  public loginForm: FormGroup;
  public data: any;
  public dialogRef: any;
  constructor(
    private readonly authService: AuthService,
    private readonly dialog: MatDialog,
    private readonly router: Router
  ) {
    // formToken form
    {
      this.formToken = new FormControl('');
    }
    // signup form
    {
      const name = new FormControl('');
      const email = new FormControl('');
      const username = new FormControl('');
      const company = new FormControl('');
      const password = new FormControl('');
      const cpassword = new FormControl('');
      this.signUpForm = new FormGroup({
        cpassword,
        company,
        email,
        username,
        password,
        name,
      });
    }
    // login form
    const username = new FormControl('');
    const password = new FormControl('');
    this.loginForm = new FormGroup({ username, password });
  }

  public toggle() {
    this.isSignup = !this.isSignup;
  }
  public loginUser() {
    console.log(this.loginForm.value);
  }
  public verify() {
    console.log('verify');
  }
  public signUp(emailVerification: any) {
    console.log(this.signUpForm.value);
    this.submitSignUpForm(emailVerification);
  }

  public submitSignUpForm(emailVerification: any) {
    this.data = this.signUpForm.value;
    this.verifyEmailId(this.data.email, emailVerification);
  }
  public async verifyEmailId(email: any, emailVerification: any) {
    // await firstValueFrom(this.authService.verifyEmailId(email));

    this.dialogRef = this.dialog.open(emailVerification, {
      panelClass: 'verifyEmail',
    });
  }
}

auth.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AuthRoutes } from './auth.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const AuthConfig: ApplicationConfig = {
  providers: [
    provideRouter(AuthRoutes, withEnabledBlockingInitialNavigation()),
    provideAnimations(),
  ],
};

auth.routes.ts

import { Route } from '@angular/router';

export const AuthRoutes: Route[] = [];

Finally we have created user login signup using email verification.

Note:-You have to modify code and bind api according to you project.