GPT

Correct Authentication Component

// components/auth.component.ts import { Component, inject } from '@angular/core' import { FormBuilder, Validators } from '@angular/forms' import { AuthService } from '../services/auth.service' @Component({ selector: '

Prompt text

Original English text. Replace placeholders with your own details.

// components/auth.component.ts
import { Component, inject } from '@angular/core'
import { FormBuilder, Validators } from '@angular/forms'
import { AuthService } from '../services/auth.service'

@Component({
 selector: 'app-auth',
 template: `
 <ng-container *ngIf="auth.isAuthenticated$ | async; else loginForm">
 <div *ngIf="auth.user$ | async as user">
 <p>Welcome, {{ user.email }}</p>
 <button (click)="signOut()">Sign Out</button>
 </div>
 </ng-container>
 <ng-template #loginForm>
 <form [formGroup]="form" (ngSubmit)="signIn()">
 <input formControlName="email" type="email" placeholder="Email" />
 <input formControlName="password" type="password" placeholder="Password" />
 <button type="submit" [disabled]="form.invalid">Sign In</button>
 </form>
 </ng-template>
 `
})
export class AuthComponent {
 private auth = inject(AuthService)
 private fb = inject(FormBuilder)

 form = this.fb.group({
 email: ['', [Validators.required, Validators.email]],
 password: ['', [Validators.required, Validators.minLength(8)]]
 })

 async signIn() {
 if (this.form.valid) {
 try {
 const { email, password } = this.form.value
 await this.auth.signIn(email!, password!)
 } catch (error) {
 console.error('Authentication failed:', error)
 }
 }
 }

 async signOut() {
 try {
 await this.auth.signOut()
 } catch (error) {
 console.error('Sign out failed:', error)
 }
 }
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →