Scribd
Upload
23 views

Laravel Angular

This document discusses the implementation of authentication in an Angular application using JSON Web Tokens (JWT). It includes code snippets for authentication services that handle signing up, signing in, and broadcasting the authentication state. Components are shown for signup, signin, and user profile that include HTML templates with form bindings. The routing module is also configured to control access to routes based on authentication state.

Uploaded by

abhiksk4141
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Laravel Angular

This document discusses the implementation of authentication in an Angular application using JSON Web Tokens (JWT). It includes code snippets for authentication services that handle signing up, signing in, and broadcasting the authentication state. Components are shown for signup, signin, and user profile that include HTML templates with form bindings. The routing module is also configured to control access to routes based on authentication state.

Uploaded by

abhiksk4141
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

auth.service.

ts
token.service.ts
auth-state.service.ts Broadcast Authentication State to Multiple Components
—————————————————

HttpInterceptor
import the HTTP_INTERCEPTORS in the app.module.ts file and set the
HTTP_INTERCEPTORS
components

signup.component.ts
<form class=“form-signin” [formGroup]=“registerForm” (ngSubmit)=“onSubmit()”>
Register User
<!-- Errors -->
<div *ngIf="errors?.name" class="alert alert-danger mt-3">
{{ errors?.name }}
</div>
<div *ngIf="errors?.email" class="alert alert-danger mt-3">
{{ errors?.email }}
</div>
<div *ngIf="errors?.password" class="alert alert-danger mt-3">
{{ errors?.password }}
</div>
<div *ngIf="errors?.password_confirmation" class="alert alert-danger mt-3">
{{ errors?.password_confirmation }}
</div>
<!-- Signup form -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" formControlName="name" />
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" formControlName="email" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" formControlName="password" />
</div>
<div class="form-group">
<label>Confirm Password</label>

1
<input
type="password"
class="form-control"
formControlName="password_confirmation"
/>
</div>
<button type="submit" class="btn btn-block btn-primary">
Register User
</button>

signin.component.ts
<form class=“form-signin” [formGroup]=“loginForm” (ngSubmit)=“onSubmit()”>
Sign in
<!-- Errors -->
<div *ngIf="errors?.email" class="alert alert-danger mt-3">
{{ errors?.email }}
</div>
<div *ngIf="errors?.password" class="alert alert-danger mt-3">
{{ errors?.password }}
</div>
<div *ngIf="errors?.error" class="alert alert-danger mt-3">
{{ errors?.error }}
</div>
<!-- Login -->
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" formControlName="email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" formControlName="password">
</div>
<button type="submit" class="btn btn-block btn-primary">Log in</button>

user-profile.component.ts
app.component.ts
Laravel Angular JWT Auth
<a class=“p-2 text-dark” routerLink=“/profile” ngIf=“isSignedIn”>User Pro-
file <a class=“p-2 text-dark” ngIf=“!isSignedIn” routerLink=“/login”>Log in
Register

2
<button class=“btn btn-outline-primary” (click)=“signOut()” *ngIf=“isSignedIn”>Log
out

app-routing.module.ts

You might also like