Angular에서 Firebase를 사용한 인증

앱에 Firebase 변수 추가

export const environment = {
  production: false,
  url_api: '',
  firebaseConfig: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
  },
};

Firebase 모듈 가져오기

import { AngularFireAuthModule } from '@angular/fire/auth';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from './../environments/environment';

@NgModule({
//declarations
  imports: [
    //other modules
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule
  ],
  // providers: [],
  // bootstrap: [AppComponent],
})
export class AppModule {}

인증 서비스에 fire 모듈 추가

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

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private fireAuth: AngularFireAuth) {}

  createUser(email: string, password: string) {
    return this.fireAuth.createUserWithEmailAndPassword(email, password);
  }
  login(email: string, password: string) {
    return this.fireAuth.signInWithEmailAndPassword(email, password);
  }
  logout() {
    return this.fireAuth.signOut();
  }
  hasUser() {
    return this.fireAuth.authState;
  }
}

로그인 구성 요소에서 서비스 사용

  login(event: Event) {
    event.preventDefault();
    if (this.form.valid) {
      const value = this.form.value;
      this.authService
        .login(value.email, value.password)
        .then(() => {
          this.router.navigate(['/admin']);
        })
        .catch(() => {
          alert('Invalid credentials');
        });
    }
  }

보너스

firebase init
ng build --prod
firebase deploy

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}