Nuxt + Firebase 入門① メール/パスワードでログイン機能を作る

npm install firebase

NUXT_PUBLIC_FIREBASE_API_KEY=xxxxx
NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxxxx.firebaseapp.com
NUXT_PUBLIC_FIREBASE_PROJECT_ID=xxxxx
NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxxxx.firebasestorage.app
NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxxxx
NUXT_PUBLIC_FIREBASE_APP_ID=xxxxx

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      firebaseApiKey: process.env.NUXT_PUBLIC_FIREBASE_API_KEY,
      firebaseAuthDomain: process.env.NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
      firebaseProjectId: process.env.NUXT_PUBLIC_FIREBASE_PROJECT_ID,
      firebaseStorageBucket: process.env.NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
      firebaseMessagingSenderId: process.env.NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
      firebaseAppId: process.env.NUXT_PUBLIC_FIREBASE_APP_ID,
    },
  },
})

import { initializeApp, getApps, getApp } from 'firebase/app'

export const getFirebaseApp = () => {
  const config = useRuntimeConfig()

  const firebaseConfig = {
    apiKey: config.public.firebaseApiKey,
    authDomain: config.public.firebaseAuthDomain,
    projectId: config.public.firebaseProjectId,
    storageBucket: config.public.firebaseStorageBucket,
    messagingSenderId: config.public.firebaseMessagingSenderId,
    appId: config.public.firebaseAppId,
  }

  // getApps() が空なら initializeApp()、既に初期化済みなら getApp()
  // → Nuxt の HMR や複数コンポーネントで初期化が二重になるのを防ぐため
  return getApps().length ? getApp() : initializeApp(firebaseConfig)
}

<script setup lang="ts">

import {
  getAuth,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  type User,
} from "firebase/auth";


const email = ref("");
const password = ref("");
const errorMessage = ref("");
const loading = ref(false);
const currentUser = ref<User | null>(null);

const app = getFirebaseApp();
const auth = getAuth(app);

onMounted(() => {
  onAuthStateChanged(auth, (user) => {
    currentUser.value = user;
  });
});

const login = async () => {
  errorMessage.value = "";
  loading.value = true;

  try {
    await signInWithEmailAndPassword(auth, email.value, password.value);
  } catch (error) {
    console.error(error);
    errorMessage.value = "ログインに失敗しました";
  } finally {
    loading.value = false;
  }
};

const logout = async () => {
  errorMessage.value = "";
  try {
    await signOut(auth);
  } catch (error) {
    console.error(error);
    errorMessage.value = "ログアウトに失敗しました";
  }
};
</script>

<template>
  <div class="page">
    <div class="card">
      <h1 class="title">Firebase ログイン</h1>
      <p class="subtitle">メールアドレスとパスワードでログインします</p>

      <div v-if="currentUser" class="user-box">
        <p class="success">ログインしました</p>
        <p class="user-text">
          ユーザー名:
          <span>{{ currentUser.displayName || "未設定" }}</span>
        </p>
        <p class="user-text">
          メールアドレス:
          <span>{{ currentUser.email }}</span>
        </p>

        <button class="button logout-button" @click="logout">
          ログアウト
        </button>
      </div>

      <form v-else class="form" @submit.prevent="login">
        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input
            id="email"
            v-model="email"
            type="email"
            placeholder="example@test.com"
          />
        </div>

        <div class="form-group">
          <label for="password">パスワード</label>
          <input
            id="password"
            v-model="password"
            type="password"
            placeholder="パスワードを入力"
          />
        </div>

        <button class="button login-button" type="submit" :disabled="loading">
          {{ loading ? "ログイン中..." : "ログイン" }}
        </button>
      </form>
<p v-if="!currentUser" class="footer-text">
  アカウントをお持ちでない方は
  <NuxtLink to="/signup" class="footer-link">新規登録はこちら</NuxtLink>
</p>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<style scoped>
.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fb;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 32px;
}

.title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: #222;
}

.subtitle {
  margin: 0 0 24px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-group input {
  padding: 12px 14px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
}

.form-group input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.button {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.login-button {
  background: #4f46e5;
  color: white;
}

.login-button:hover {
  background: #4338ca;
}

.logout-button {
  margin-top: 16px;
  background: #ef4444;
  color: white;
}

.logout-button:hover {
  background: #dc2626;
}

.user-box {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}

.success {
  margin: 0 0 16px;
  color: #16a34a;
  font-weight: 700;
  font-size: 16px;
}

.user-text {
  margin: 8px 0;
  color: #333;
}

.user-text span {
  font-weight: 600;
}

.error-message {
  margin-top: 16px;
  color: #dc2626;
  font-size: 14px;
  text-align: center;
}
</style>

onMounted(() => {
  onAuthStateChanged(auth, (user) => {
    currentUser.value = user;
  });
});

await signInWithEmailAndPassword(auth, email.value, password.value);