Firebase 인증을 통해 구글 및 페이스북, 트위터, GitHub 등의 계정으로 쉽게 로그인할 수 있는 서비스를 만들 수 있습니다.
최근 관심이 있는 Sapper(Svelte)를 사용해 간단하게 구글 로그인을 구현해 보려고 합니다.

예제 결과는 위 GitHub Repository 버튼을 클릭하면 확인할 수 있습니다.

$ npx degit "ParkYoungWoong/firebase-auth-with-sapper" YOUR_PROJECT_NAME

Sapper 설치

Sapper(Svelte APP makER)는 Svelte를 기반으로 동작하는 다음과 같은 기능들을 지원하는 프레임워크입니다.
React의 Next.js, Vue의 Nuxt.js와 같은 라인업이라고 볼 수 있습니다.

• 라우팅
• 서버 사이드 렌더링(SSR)
• 자동 코드 분할
• 오프라인 지원(Service Worker)
• 고급 프로젝트 구조 관리

다음과 같이 Degit을 이용해 새로운 프로젝트를 생성합니다.

$ npx degit "sveltejs/sapper-template#rollup" YOUR_PROJECT_NAME
$ cd YOUR_PROJECT_NAME
$ npm install

설치 후 Sapper는 다음과 같은 구조를 가집니다.

Firebase 프로젝트 생성

Firebase는 인증, 실시간 데이터베이스, 스토리지, 푸시, 호스팅 등 다양한 기능을 지원하는 통합 플랫폼입니다.
Firebase 페이지에 접속에 로그인 후 다음과 같이 진행합니다.

1) Firebase 콘솔에 로그인한 후 새로운 프로젝트 생성합니다.

2) 프로젝트의 이름을 지정하는 등 ‘프로젝트 만들기’의 단계를 수행합니다.

3) 새로운 프로젝트가 준비되면 ‘계속’을 눌러 대시보드로 접근합니다.

4) ‘Authentication’의 ‘로그인 방법’에서 제공 업체로 ‘Google’을 선택합니다.

5) ‘사용 설정’을 활성화하고 ‘프로젝트 지원 이메일’을 설정한 후 저장합니다.

6) 제공 업체 상태가 ‘사용 설정됨’으로 표시되면 준비가 끝났습니다.

Firebase 설치 및 초기화

전역으로 firebase 명령어를 사용하기 위해 다음과 같이 ‘firebase-tools’을 전역 설치합니다.

$ npm i -g firebase-tools

설치가 완료되었다면 다음으로 구글에 로그인해야 합니다.

이 명령어는 로컬 머신을 Firebase에 연결하고 Firebase 프로젝트에 대한 액세스 권한을 부여합니다.

$ firebase login

다음은 Firebase 프로젝트를 초기화해야 합니다.
프로젝트 디렉터리의 루트에서 다음 명령어를 실행합니다.

$ firebase init

원하는 Firebase CLI 기능을 선택(당장은 ‘인증’만 테스트하기 때문에 아무 기능이나 선택)하고,
위에서 생성한 Firebase 프로젝트(auth-test-with-sapper)를 연결합니다.

Firebase 호스팅에 필요한 firebase.json 파일을 생성합니다.
Firebase가 찾는 디렉터리의 기본 이름은 ‘public’입니다.
나중에 firebase.json 파일을 직접 수정하여 공개 디렉터리를 설정할 수도 있습니다.

Firebase 내 앱 추가

Sapper 프로젝트에 Firebase 인증을 적용하기 전에,
우선 다음과 같이 Firebase가 지원할 내 앱(Sapper 프로젝트)의 플랫폼을 선택해 SDK 구성을 얻어야 합니다.

1) ‘프로젝트 설정’으로 접근합니다.

2) ‘내 앱’에서 ‘Web’으로 플랫폼을 선택합니다.

2) 혹은 ‘Project Overview’에서 바로 선택할 수도 있습니다.

3) 내 웹앱의 이름을 설정합니다.
(하나의 Firebase 프로젝트 내 여러 앱을 추가할 수 있습니다)

4) Firebase SDK 추가를 위한 코드가 발급됩니다.
(공개 가능한 구성입니다)

보안 규칙과 관련된 내용은 Firebase Security Rules를 참고하세요.

이제 인증(Auth)을 위한 SDK를 연결하기 위해 위 구성에 적혀있는 것처럼 https://firebase.google.com/docs/web/setup#available-libraries 로 이동합니다.

우리는 인증을 사용하기 때문에 firebase-auth.js를 연결할 것입니다.
우리의 Sapper 프로젝트의 src/template.html에 다음과 같이 코드를 추가합니다.

<!-- src/template.html -->

<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyDEZzrvW7PlAgDmQWtw_hecYHTLi7NBWxA",
    authDomain: "auth-test-with-sapper.firebaseapp.com",
    databaseURL: "https://auth-test-with-sapper.firebaseio.com",
    projectId: "auth-test-with-sapper",
    storageBucket: "auth-test-with-sapper.appspot.com",
    messagingSenderId: "148687957530",
    appId: "1:148687957530:web:919b0b6018d8bbde5d2ba3"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

이 프로젝트는 클라이언트 정적 파일에서 인증(로그인)만 사용하기 때문에 Sapper 서버에서 사용하지 않도록 CDN으로 설치합니다.
https://stackoverflow.com/questions/56315901/how-to-import-firebase-only-on-client-in-sapper

컴포넌트 및 스토어

구글 로그인을 위해 다음과 같이 컴포넌트와 스토어 파일을 생성할 것입니다.

user 스토어

프로젝트 내 전역으로 현재 사용자(currentUser)에 접근하기 위해 쓰기 가능하도록 다음과 같이 작성합니다.

// src/store/user.js

import { writable } from 'svelte/store'

export const currentUser = writable(null)

SignInWithGoogle 컴포넌트

구글 로그인을 위한 컴포넌트를 다음과 같이 작성합니다.
Nav(Header)의 오른쪽에 위치하도록 스타일을 정의합니다.

<!-- src/components/SignInWithGoogle.svelte -->

<script>
  // 스토어에서 현재 사용자를 가져옵니다.
  // `currentUser`는 쓰기용 객체 데이터(writable)이기 때문에 `$` 접두사를 사용해 스토어를 참조해야 합니다.
  // `$currentUser`
  import { currentUser } from '../store/user';

  // 구글로 로그인
  const signInWithGoogle = async () => {
    await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider()
      // 페이스북이나 트위터 등으로도 로그인할 수 있습니다.
      // new firebase.auth.FacebookAuthProvider()
      // new firebase.auth.TwitterAuthProvider()
      // new firebase.auth.GithubAuthProvider()
    );
  };

  // 로그아웃
  const signOut = async () => {
    await firebase.auth().signOut();
  };
</script>

<div class="sign-in-with-google">
  {#if $currentUser}
    <div class="user">
      <div class="user__name">{$currentUser.displayName}</div>
      <div class="user__photo">
        <img
          src={$currentUser.photoURL}
          alt={$currentUser.displayName}
          width="28" />
      </div>
    </div>
    <div
      class="sign-out"
      on:click={signOut}>
      Sign out
    </div>
  {:else}
    <div
      class="sign-in"
      on:click={signInWithGoogle}>
      Sign in with Google
    </div>
  {/if}
</div>

<style>
  .sign-in-with-google {
    height: 56px;
    position: absolute;
    top: 0;
    right: 1em;
    display: flex;
    align-items: center;
  }
  .sign-in-with-google .user {
    display: flex;
    align-items: center;
  }
  .sign-in-with-google .user .user__name {
    font-size: 13px;
    font-weight: 700;
    margin-right: 6px;
  }
  .sign-in-with-google .user .user__photo {
    width: 28px;
    height: 28px;
    border: 1px solid lightgray;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
  }
  .sign-in-with-google .sign-out {
    font-size: 13px;
    cursor: pointer;
  }
  .sign-in-with-google .sign-out:hover {
    text-decoration: underline;
  }
</style>

작성한 SignInWithGoogle.svelte 컴포넌트는 src/components/Nav.svelte에서 다음과 같이 사용합니다.
nav 요소에 position 속성이 있어야 정상적으로 배치될 수 있습니다.

<!-- src/components/Nav.svelte -->

<script>
  import SignInWithGoogle from './SignInWithGoogle.svelte';
  // ...
</script>

<style>
  nav {
    /* ... */
    position: relative;
  }
</style>

<nav>
  <!-- ... -->
  <SignInWithGoogle />
</nav>

UserObserver 컴포넌트

사용자의 상태(로그인, 로그아웃)를 감지하기 위한 컴포넌트를 다음과 같이 작성합니다.

<!-- src/components/UserObserver.svelte -->

<script>
  import { onMount } from 'svelte';
  import { currentUser } from '../store/user';

  // Client 환경에서 동작하도록 `onMount` 훅에서 실행합니다.
  onMount(() => {
    // 로그인 사용자의 상태 변환(로그인, 로그아웃)에 따라 콜백을 실행합니다.
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        // 쓰기 가능한 객체이기 때문에 바로 사용자를 할당할 수 있습니다.
        $currentUser = user
      } else {
        // 사용자가 없는 경우 초기화합니다.
        $currentUser = null
      }
    });
  });
</script>

작성한 UserObserver.svelte 컴포넌트는 항시 동작할 수 있도록 src/routes/_layout.svelte에서 다음과 같이 사용합니다.

<!-- src/routes/_layout.svelte -->

<script>
  import UserObserver from '../components/UserObserver.svelte';
  // ...
</script>

<UserObserver />

FirebaseUI로 로그인 UI 추가

FirebaseUI는 Firebase 인증 UI를 제공하는 공식 라이브러리입니다.
별도의 UI 제작 없이 손쉽게 구글, 페이스북, 트위터 등의 로그인 UI를 제작할 수 있습니다.

먼저 다음과 같이 FirebaseUI를 설치합니다.

<!-- src/template.html -->

<!-- ... -->
<script src="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.css" />
<!-- ... -->

SignInWithGoogle.svelte 컴포넌트를 FirebaseUI가 적용될 수 있도록 다음과 같이 수정합니다.

<!-- src/components/SignInWithGoogle.svelte -->

<script>
  import { onMount, tick } from 'svelte'
  import { currentUser } from '../store/user';

  // 컴포넌트가 마운트되면 현재 사용자를 체크하고,
  // 사용자가 없으면 구글 로그인 버튼을 생성합니다.
  onMount(() => {
    if (!$currentUser) {
      createLoginButton();
    }
  });

  // 로그인 버튼 생성
  function createLoginButton() {
    // FirebaseUI config.
    const uiConfig = {
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        // 페이스북이나 트위터 등의 로그인 UI도 같이 제공할 수 있습니다.
        // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        // firebase.auth.GithubAuthProvider.PROVIDER_ID
      ],
      callbacks: {
        signInSuccessWithAuthResult: (authResult, redirectUrl) => false
      }
    };

    // FirebaseUI 초기화
    const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());
    // 해당 요소를 검색(아이디 선택자)하고 UI를 렌더링합니다.
    ui.start("#firebaseui-auth-container", uiConfig);
  }

  // ...

  const signOut = async () => {
    await firebase.auth().signOut();
    // 현재 사용자 상태 변화(로그아웃)에 따라 렌더링을 대기합니다.
    await tick();
    // 로그인 버튼을 생성합니다.
    createLoginButton();
  };
</script>

<div class="sign-in-with-google">
  <!-- ... -->
  {:else}
    <!-- `.sign-in`에 있던 클릭 이벤트를 제거해야 합니다. -->
    <div class="sign-in">
      <!-- FirebaseUI가 렌더링되는 위치 -->
      <div id="firebaseui-auth-container"></div>
    </div>
  {/if}
</div>

<style>
  /* ... */

  /* reset firebaseui margin & padding */
  /* 현재 화면에 맞지 않는 스타일들을 초기화합니다. */
  /* Svelte에서는 유효범위 없이 스타일을 선언하려면 :global(선택자) 수정자(Modifier)를 사용해야 합니다. */
  :global(.firebaseui-card-content) {
    padding: 0 !important;
  }
  :global(.firebaseui-idp-list),
  :global(.firebaseui-list-item) {
    margin: 8px 0 !important;
  }
</style>

참고 자료(References)

https://firebase.google.com/docs/web/setup