「Nest.jsをバックで使っている時にFirebase認証をどうやるの？」とふと思ったので自分なりに学んで実装した記事になります

構成

.
├── Makefile
├── backend
│   ├── README.md
│   ├── nest-cli.json
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── app.controller.spec.ts
│   │   ├── app.controller.ts
│   │   ├── app.module.ts
│   │   ├── app.service.ts
│   │   ├── auth
│   │   │   ├── auth.guard.spec.ts
│   │   │   └── auth.guard.ts
│   │   ├── firebase-admin
│   │   │   ├── firebase-admin.module.ts
│   │   │   ├── firebase-admin.service.spec.ts
│   │   │   └── firebase-admin.service.ts
│   │   ├── main.ts
│   │   ├── schema.gql
│   │   └── user
│   │       ├── dto
│   │       ├── entities
│   │       ├── user.module.ts
│   │       ├── user.resolver.spec.ts
│   │       ├── user.resolver.ts
│   │       ├── user.service.spec.ts
│   │       └── user.service.ts
│   ├── test
│   │   ├── app.e2e-spec.ts
│   │   └── jest-e2e.json
│   ├── tsconfig.build.json
│   └── tsconfig.json
├── docker
│   ├── backend
│   │   └── Dockerfile
│   └── frontend
│       └── Dockerfile
├── docker-compose.yml
└── frontend
    ├── README.md
    ├── codegen.ts
    ├── eslint.config.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    ├── setupTests.ts
    ├── src
    │   ├── App.css
    │   ├── App.tsx
    │   ├── assets
    │   │   └── react.svg
    │   ├── auth
    │   │   ├── __tests__
    │   │   ├── firebase.ts
    │   │   ├── firebaseInit.ts
    │   │   └── useFirebase.ts
    │   ├── configs
    │   │   └── apolloClient.ts
    │   ├── gql
    │   │   ├── user.gen.ts
    │   │   └── user.gql
    │   ├── index.css
    │   ├── main.tsx
    │   ├── mocks
    │   │   ├── handlers.ts
    │   │   └── server.ts
    │   ├── page
    │   │   ├── __tests__
    │   │   ├── create.tsx
    │   │   ├── login.tsx
    │   │   ├── userWithLogin.tsx
    │   │   └── userWithoutLogin.tsx
    │   ├── providers
    │   │   └── apolloProvider.tsx
    │   ├── router
    │   │   └── router.tsx
    │   ├── types
    │   │   └── graphql.gen.ts
    │   └── vite-env.d.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

バックエンド側

タイトルにもある通りNestjsになります

フロントエンド側

サクッと構築したいのでReactになります
FireabaseAuthでログイン機能を実装・バックエンドとやり取りをする形になります

docker

dockerは本題とは違うため簡単な形で構成しています

環境構築

docker

zsh

mkdir nestFirebase
cd nestFirebase

初めにdocker-compose.ymlを作成していきます

docker-compose.yml

version: '3.8'
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: ../docker/frontend/Dockerfile
    ports:
      - ${FRONTEND_PORT}:${FRONTEND_PORT}
    environment:
      VITE_BACKEND_URI: ${BACKEND_URI}
      VITE_FIREBASE_API_KEY: ${FIREBASE_API_KEY}
      VITE_FIREBASE_AUTH_DOMAIN: ${FIREBASE_AUTH_DOMAIN}
      VITE_FIREBASE_PROJECT_ID: ${FIREBASE_PROJECT_ID}
      VITE_FIREBASE_STORAGE_BUCKET: ${FIREBASE_STORAGE_BUCKET}
      VITE_FIREBASE_MESSAGING_SENDER_ID: ${FIREBASE_MESSAGING_SENDER_ID}
      VITE_FIREBASE_APP_ID: ${FIREBASE_APP_ID}
    volumes:
      - ./frontend:/app
    depends_on:
      - backend

  backend:
    build:
      context: ./backend
      dockerfile: ../docker/backend/Dockerfile
    ports:
      - ${BACKEND_PORT}:${BACKEND_PORT}
    depends_on:
      - postgres
    volumes:
      - ./backend:/app
    environment:
      POSTGRES_HOST: ${POSTGRES_HOST}
      POSTGRES_PORT: ${POSTGRES_PORT}
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
      PORT: ${BACKEND_PORT}
      SCHEMA: ${POSTGRES_SCHEMA}
      FIREBASE_PROJECT_ID: ${FIREBASE_PROJECT_ID}
      FIREBASE_CLIENT_EMAIL: ${FIREBASE_CLIENT_EMAIL}
      FIREBASE_PRIVATE_KEY: ${FIREBASE_PRIVATE_KEY}
    networks:
      - backend-network

  postgres:
    image: postgres:13
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - backend-network

volumes:
  postgres_data:

networks:
  backend-network:
    driver: bridge

.envを整えていきます
PostgresSQL・Portは個人開発用設定のため載せています

.env

POSTGRES_HOST=postgres
POSTGRES_PORT=5432
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=mydb
POSTGRES_SCHEMA=public

BACKEND_PORT=4000

FRONTEND_PORT=3000
BACKEND_URI=http://localhost:4000/graphql

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY=

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=

上記6つはFirebaseのアプリに表示されているConfigを記載してください

FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY=

上記２つはプロジェクトの設定＞サービスアカウント移動するとFirebase Admin SDKの欄があるので「新しい秘密鍵を生成」をクリックしてダウンロードします
ダウンロード出来たら開いて

client_emailはFIREBASE_CLIENT_EMAILに記載
private_keyはFIREBASE_PRIVATE_KEYに記載
してください

backendとfrontendのDockerfileを整えていきます
今回はバックエンド用・フロントエンド用の二種類になります

バックエンド用Dockerfile

zsh

mkdir docker
cd docker
mkdir backend
cd backend
touch Dockerfile

docker/backend/Dockerfile

FROM node:20
WORKDIR /app
COPY package*.json ./
RUN npm install
EXPOSE 4000
CMD ["npm", "run", "start:dev"]

フロントエンド用Dockerfile

zsh

mkdir docker
cd docker
mkdir frontend
cd frontend
touch Dockerfile

docker/frontend/Dockefile

FROM node:20
WORKDIR /app
COPY package*.json ./
RUN npm install
EXPOSE 3000
CMD ["npm", "run", "dev"]

バックエンド構築

zsh

npx nest new backend

今回はWhich package manager would you ❤️ to use?をnpmで選択していますが、ご自身の使いやすいものを選択してください
npm以外を選択した場合は今後のnpmで書かれている箇所を読み替えてください

zsh

⚡  We will scaffold your app in a few seconds..

? Which package manager would you ❤️  to use? npm
CREATE backend/.eslintrc.js (663 bytes)
CREATE backend/.prettierrc (51 bytes)
CREATE backend/README.md (5205 bytes)
CREATE backend/nest-cli.json (171 bytes)
CREATE backend/package.json (1943 bytes)
CREATE backend/tsconfig.build.json (97 bytes)
CREATE backend/tsconfig.json (546 bytes)
CREATE backend/src/app.controller.ts (274 bytes)
CREATE backend/src/app.module.ts (249 bytes)
CREATE backend/src/app.service.ts (142 bytes)
CREATE backend/src/main.ts (228 bytes)
CREATE backend/src/app.controller.spec.ts (617 bytes)
CREATE backend/test/jest-e2e.json (183 bytes)
CREATE backend/test/app.e2e-spec.ts (630 bytes)

✔ Installation in progress... ☕

🚀  Successfully created project backend
👉  Get started with the following commands:

$ cd backend
$ npm run start

                                         
                          Thanks for installing Nest 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                                         
               🍷  Donate: https://opencollective.com/nest

フロントエンド構築

zsh

npm create vite@latest frontend -- --template react-swc-ts

portをDockerfileに合わせるためvite.config.tsを変更していきます

frontend/vite.config.ts

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
+  server: {
+    host: "0.0.0.0",
+    port: 3000,
+  },
});

実行

ここまで来たらコンテナが問題なく作成・起動するか確認をしてみます

zsh

docker compose up -d --build

下記にアクセスして問題なく表示されたら一先ず完了になります

バックエンド

フロントエンド

バックエンド実装

インストール

バックエンド側で必要なライブラリをインストールしていきます

zsh

npm install @apollo/server @nestjs/apollo @nestjs/graphql graphql
npm install --save @nestjs/config firebase-admin typeorm class-validator class-transformer @nestjs/typeorm @nestjs/config

CORSの設定

バックエンドだけであれば問題ないのですが、今回はフロントエンドも実装するのでCORS設定が必要です

backend/src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

+  app.enableCors({
+    origin: 'http://localhost:3000',
+    methods: 'GET, POST, PUT, DELETE',
+    allowedHeaders: 'Content-Type, Authorization',
+  });

  await app.listen(process.env.PORT);
}
bootstrap();

app.module.tsを整える

必要な設定を記載しています

backend/src/app.module.ts

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { GraphQLModule } from '@nestjs/graphql';
import { TypeOrmModule } from '@nestjs/typeorm';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { FirebaseAdminModule } from './firebase-admin/firebase-admin.module';
import { FirebaseAdminService } from './firebase-admin/firebase-admin.service';
import { UserModule } from './user/user.module';

const configService = new ConfigService();

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      playground: true,
      installSubscriptionHandlers: true,
      debug: true,
      sortSchema: true,
    }),
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: configService.get('POSTGRES_HOST'),
      port: configService.get('POSTGRES_PORT'),
      username: configService.get('POSTGRES_USER'),
      password: configService.get('POSTGRES_PASSWORD'),
      database: configService.get('POSTGRES_DB'),
      schema: configService.get('POSTGRES_SCHEMA'),
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

認証機能を整える

今回一番大事な箇所になります
serviceとguardを使用して認証機能を実装します

1. service作成

serviceを作成していきます

zsh

docker compose exec backend npx nest g s firebaseAdmin

問題なければbackend/src/firebase-admin/firebase-admin.service.tsが作成されているのでコードを書いていきます
admin.auth().verifyIdToken(token)でフロントエンドからjwtが渡ってきて検証する形になります
カスタムクレームを設定していればより厳密な検証が行えます

backend/src/firebase-admin/firebase-admin.service.ts

import {
  Injectable,
  OnModuleInit,
  UnauthorizedException,
} from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import * as admin from 'firebase-admin';
import { ServiceAccount } from 'firebase-admin';

@Injectable()
export class FirebaseAdminService implements OnModuleInit {
  onModuleInit() {
    const configService = new ConfigService();
    if (admin.apps.length === 0) {
      admin.initializeApp({
        credential: admin.credential.cert({
          projectId: configService.get('FIREBASE_PROJECT_ID'),
          clientEmail: configService.get('FIREBASE_CLIENT_EMAIL'),
          privateKey: configService
            .get('FIREBASE_PRIVATE_KEY')
            .replace(/\\n/g, '\n'),
        } as ServiceAccount),
      });
    }
  }

  async verifyToken(token: string) {
    try {
      return await admin.auth().verifyIdToken(token);
    } catch (error) {
      throw new UnauthorizedException('Invalid token', error);
    }
  }
}

テスト

backend/src/firebase-admin/firebase-admin.service.spec.ts

import { UnauthorizedException } from '@nestjs/common';
import { Test, TestingModule } from '@nestjs/testing';
import * as admin from 'firebase-admin';
import { FirebaseAdminService } from './firebase-admin.service';

describe('FirebaseAdminService', () => {
  let service: FirebaseAdminService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [FirebaseAdminService],
    }).compile();

    service = module.get<FirebaseAdminService>(FirebaseAdminService);

    jest.spyOn(admin, 'auth').mockReturnValue({
      verifyIdToken: jest.fn(),
    } as any);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });

  describe('verifyToken', () => {
    it('有効なトークを検証する', async () => {
      const mockToken = 'valid_token';
      const mockDecodedToken = { uid: 'user123' };

      (admin.auth().verifyIdToken as jest.Mock).mockResolvedValueOnce(
        mockDecodedToken,
      );

      const result = await service.verifyToken(mockToken);
      expect(result).toEqual(mockDecodedToken);
    });

    it('無効なトークンでUnauthorizedExceptionを投げる', async () => {
      const mockToken = 'invalid_token';

      (admin.auth().verifyIdToken as jest.Mock).mockRejectedValueOnce(
        new Error('Invalid token'),
      );

      await expect(service.verifyToken(mockToken)).rejects.toThrow(
        UnauthorizedException,
      );
    });
  });
});

2. module作成

moduleを作成していきます

zsh

docker compose exec backend npx nest g mo firebaseAdmin

問題なければbackend/src/firebase-admin/firebase-admin.module.tsが作成されるのでコードを書いていきます
前述したserviceを呼んであげるだけになります

backend/src/firebase-admin/firebase-admin.module.ts

import { Global, Module } from '@nestjs/common';
import { FirebaseAdminService } from './firebase-admin.service';

@Global()
@Module({
  providers: [FirebaseAdminService],
  exports: [FirebaseAdminService],
})
export class FirebaseAdminModule {}

3. guard作成

guardを作成していきます

zsh

docker compose exec backend npx nest g gu auth

問題なければbackend/src/auth/auth.guard.tsが作成されるのでコードを書いていきます
headerの中身にあるauthorizationからjwtを取得、serviceにて実装したverifyTokenを使って認証処理を行っています

req.uuid = decodedToken.uid;
req.email = decodedToken.email;

と記載しておけば処理内でuuidとemailを取得することが出来ます
uuidとemailの取得をバックエンドのみで簡潔することが出来ます

backend/src/auth/auth.guard.ts

import {
  CanActivate,
  ExecutionContext,
  Injectable,
  UnauthorizedException,
} from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { FirebaseAdminService } from '../firebase-admin/firebase-admin.service';

export type AuthContext = {
  req: Record<'uuid' | 'email', string>;
};

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private readonly firebaseAdminService: FirebaseAdminService) {}

  async canActivate(context: ExecutionContext): Promise<boolean> {
    const ctx = GqlExecutionContext.create(context);
    const req = ctx.getContext().req;

    const authHeader = req.headers['authorization'];
    const token = authHeader?.split(' ')[1];

    if (!token) {
      throw new UnauthorizedException('Token not found');
    }

    try {
      const decodedToken = await this.firebaseAdminService.verifyToken(token);
      req.uuid = decodedToken.uid;
      req.email = decodedToken.email;

      if (!req.uuid || !req.email) {
        throw new UnauthorizedException('Invalid token payload');
      }

      return true;
    } catch (error) {
      console.error('Token verification failed:', error);
      throw new UnauthorizedException('Invalid token');
    }
  }
}

テスト

backend/src/auth/auth.guard.spec.ts

import { ExecutionContext, UnauthorizedException } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { FirebaseAdminService } from '../firebase-admin/firebase-admin.service';
import { AuthGuard } from './auth.guard';

describe('AuthGuard', () => {
  let authGuard: AuthGuard;
  let mockFirebaseAdminService: Partial<FirebaseAdminService>;

  beforeEach(() => {
    mockFirebaseAdminService = {
      verifyToken: jest.fn(),
    };
    authGuard = new AuthGuard(mockFirebaseAdminService as FirebaseAdminService);
    jest.spyOn(console, 'error').mockImplementation(() => {});
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('定義されていること', () => {
    expect(authGuard).toBeDefined();
  });

  it('トークンが有効であればアクセスを許可すること', async () => {
    const mockToken = 'valid-token';
    const mockDecodedToken = { uid: '123', email: 'test@example.com' };
    (mockFirebaseAdminService.verifyToken as jest.Mock).mockResolvedValue(
      mockDecodedToken,
    );

    const mockReq = {
      headers: {
        authorization: `Bearer ${mockToken}`,
      },
      uuid: '',
      email: '',
    };

    const mockContext = {
      getContext: () => ({ req: mockReq }),
      getType: () => 'graphql',
    } as unknown as ExecutionContext;

    jest
      .spyOn(GqlExecutionContext, 'create')
      .mockReturnValue(mockContext as any);

    const result = await authGuard.canActivate(mockContext);
    expect(result).toBe(true);
    expect(mockReq.uuid).toBe(mockDecodedToken.uid);
    expect(mockReq.email).toBe(mockDecodedToken.email);
  });

  it('トークンが無効であればUnauthorizedExceptionをスローすること', async () => {
    const mockToken = 'invalid-token';
    (mockFirebaseAdminService.verifyToken as jest.Mock).mockRejectedValue(
      new Error('Invalid token'),
    );

    const mockReq = {
      headers: {
        authorization: `Bearer ${mockToken}`,
      },
    };

    const mockContext = {
      getContext: () => ({ req: mockReq }),
      getType: () => 'graphql',
    } as unknown as ExecutionContext;

    jest
      .spyOn(GqlExecutionContext, 'create')
      .mockReturnValue(mockContext as any);

    await expect(authGuard.canActivate(mockContext)).rejects.toThrow(
      UnauthorizedException,
    );
  });

  it('トークンが提供されていなければUnauthorizedExceptionをスローすること', async () => {
    const mockReq = {
      headers: {},
    };

    const mockContext = {
      getContext: () => ({ req: mockReq }),
      getType: () => 'graphql',
    } as unknown as ExecutionContext;

    jest
      .spyOn(GqlExecutionContext, 'create')
      .mockReturnValue(mockContext as any);

    await expect(authGuard.canActivate(mockContext)).rejects.toThrow(
      UnauthorizedException,
    );
  });

  it('トークンのペイロードにuidまたはemailが含まれていない場合、UnauthorizedExceptionをスローすること', async () => {
    const mockToken = 'valid-token';
    const mockDecodedToken = { uid: '', email: '' };
    (mockFirebaseAdminService.verifyToken as jest.Mock).mockResolvedValue(
      mockDecodedToken,
    );

    const mockReq = {
      headers: {
        authorization: `Bearer ${mockToken}`,
      },
    };

    const mockContext = {
      getContext: () => ({ req: mockReq }),
      getType: () => 'graphql',
    } as unknown as ExecutionContext;

    jest
      .spyOn(GqlExecutionContext, 'create')
      .mockReturnValue(mockContext as any);

    await expect(authGuard.canActivate(mockContext)).rejects.toThrow(
      UnauthorizedException,
    );
  });
});

Userテーブル

今回は簡単に実装するためにUserテーブルのみ作成していきます

1. entity作成

まずはテーブル構造に当たるentityを作成していきます

zsh

mkdir -p backend/src/user/entities
touch backend/src/user/entities/user.entity.ts

作成出来たらコードを書いていきます
uuid・name・emailの３つだけにしています

backend/src/user/entities/user.entity.ts

import { Field, ObjectType } from '@nestjs/graphql';
import { Column, Entity, PrimaryColumn } from 'typeorm';

@ObjectType()
@Entity()
export class User {
  @Field(() => String)
  @PrimaryColumn({ nullable: false, comment: 'FIrebase Auth UUID' })
  uuid: string;

  @Field()
  @Column({ nullable: false, comment: 'ユーザー名' })
  name: string;

  @Field()
  @Column({ nullable: false, comment: 'メールアドレス' })
  email: string;
}

2. DTO作成

DAO・DTOとは少し違ってRequest Payloadの型を定義したものだと考えてください
初めにdtoを入れておくディレクトリを作成します

zsh

mkdir backend/src/user/dto

2-1. 新規作成で使用するdto作成

初めにユーザーデータを新規作成する際に使用するdtoを作成していきます

create-user-only-name.input
- フロントエンドから送られているnameの型を定義します
create-user.input.ts
- resolverからserviceを呼ぶ際に渡す型を定義します

zsh

touch backend/src/user/dto/create-user-only-name.input.ts
touch backend/src/user/dto/create-user.input.ts

create-user-only-name.input.ts

import { Field, InputType } from '@nestjs/graphql';
import { IsNotEmpty, IsString } from 'class-validator';

@InputType()
export class CreateUserOnlyNameInput {
  @Field()
  @IsNotEmpty()
  @IsString()
  name: string;
}

create-user.input.ts

import { Field, InputType } from '@nestjs/graphql';
import { IsNotEmpty, IsString } from 'class-validator';

@InputType()
export class CreateUserInput {
  @Field()
  @IsNotEmpty()
  @IsString()
  uuid: string;

  @Field()
  @IsNotEmpty()
  @IsString()
  name: string;

  @Field()
  @IsNotEmpty()
  @IsString()
  email: string;
}

2-2. データ呼び出しに使用するdto作成

データ呼び出し時はFirebaseAuthのuuidを元にデータを絞り込んで検索出来るように型を定義しています

zsh

touch backend/src/user/dto/find-one-by-uuid.input.ts

backend/src/user/dto/find-one-by-uuid.input.ts

import { Field, InputType } from '@nestjs/graphql';
import { IsNotEmpty, IsString } from 'class-validator';

@InputType()
export class FindOneByUuidInput {
  @Field()
  @IsNotEmpty()
  @IsString()
  uuid: string;
}

3. service作成

zsh

docker compose exec backend npx nest g s user

問題なければbackend/src/user/user.service.tsが作成されるのでコードを書いていきます
dto作成時にあった、新規作成・データ呼び出し以外に全件呼び出しをする処理も実装していきます

backend/user/user.service.ts

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateUserInput } from './dto/create-user.input';
import { FindOneByUuidInput } from './dto/find-one-by-uuid.input';
import { User } from './entities/user.entity';

@Injectable()
export class UserService {
  constructor(
    @InjectRepository(User)
    private userRepository: Repository<User>,
  ) {}

  findAll(): Promise<User[]> {
    return this.userRepository.find();
  }

  findOneByUUID(findOneByUuidInput: FindOneByUuidInput): Promise<User> {
    return this.userRepository.findOneBy(findOneByUuidInput);
  }

  create(createUserInput: CreateUserInput): Promise<User> {
    const user = this.userRepository.create(createUserInput);
    return this.userRepository.save(user);
  }
}

テスト

backend/src/user/auth.service.spec.ts

import { Test, TestingModule } from '@nestjs/testing';
import { getRepositoryToken } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './entities/user.entity';
import { UserService } from './user.service';

describe('UserService', () => {
  let service: UserService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [
        UserService,
        {
          provide: getRepositoryToken(User),
          useClass: Repository,
        },
      ],
    }).compile();

    service = module.get<UserService>(UserService);
  });

  it('定義されている', () => {
    expect(service).toBeDefined();
  });

  it('findAllでユーザーの配列が返される', async () => {
    const result = [new User()];
    jest.spyOn(service, 'findAll').mockResolvedValue(result);

    expect(await service.findAll()).toBe(result);
  });

  it('findOneByUUIDでユーザーが返される', async () => {
    const result = new User();
    jest.spyOn(service, 'findOneByUUID').mockResolvedValue(result);

    expect(await service.findOneByUUID({ uuid: 'some-uuid' })).toBe(result);
  });

  it('createで新規ユーザーが返される', async () => {
    const result = new User();
    jest.spyOn(service, 'create').mockResolvedValue(result);

    expect(
      await service.create({
        uuid: 'some-uuid',
        email: 'john.doe@example.com',
        name: 'John Doe',
      }),
    ).toBe(result);
  });
});

4. resolver作成

zsh

docker compose exec backend npx nest g r user

問題なければbackend/src/user/user.resolver.tsが作成されるのでコードを書いていきます
dtoの他に前述したAuthGuardを呼び出してあげます

@UseGuards(AuthGuard)と呼び出してあげると認証処理が走り、失敗したらデータ取得出来ずエラーになります

@Context() context: AuthContextと呼ぶと処理内でuuidとemailの取得が出来ます

import { UseGuards } from '@nestjs/common';
import { Args, Context, Mutation, Query, Resolver } from '@nestjs/graphql';
import { AuthContext, AuthGuard } from '../auth/auth.guard';
import { CreateUserOnlyNameInput } from './dto/create-user-only-name.input';
import { CreateUserInput } from './dto/create-user.input';
import { User } from './entities/user.entity';
import { UserService } from './user.service';

@Resolver(() => User)
export class UserResolver {
  constructor(private readonly userService: UserService) {}

  @Query(() => [User], { name: 'users' })
  findAll() {
    return this.userService.findAll();
  }

  @Query(() => User, { name: 'user' })
  @UseGuards(AuthGuard)
  findOne(@Context() context: AuthContext) {
    const { uuid } = context.req;

    return this.userService.findOneByUUID({ uuid });
  }

  @Mutation(() => User)
  @UseGuards(AuthGuard)
  createUser(
    @Args('createUserOnlyNameInput')
    createUserOnlyNameInput: CreateUserOnlyNameInput,
    @Context() context: AuthContext,
  ) {
    const { uuid, email } = context.req;
    const userWithUUID: CreateUserInput = {
      ...createUserOnlyNameInput,
      uuid,
      email,
    };
    return this.userService.create(userWithUUID);
  }
}

テスト

backend/src/user/auth.service.spec.ts

import { Test, TestingModule } from '@nestjs/testing';
import { DecodedIdToken } from 'firebase-admin/lib/auth/token-verifier';
import { AuthGuard } from '../auth/auth.guard';
import { CreateUserOnlyNameInput } from './dto/create-user-only-name.input';
import { User } from './entities/user.entity';
import { UserResolver } from './user.resolver';
import { UserService } from './user.service';

describe('UserResolver', () => {
  let resolver: UserResolver;
  let userService: UserService;

  beforeEach(async () => {
    const mockAuthGuard = {
      canActivate: jest.fn(() => true),
    };

    const module: TestingModule = await Test.createTestingModule({
      providers: [
        UserResolver,
        {
          provide: UserService,
          useValue: {
            findAll: jest.fn(),
            findOneByUUID: jest.fn(),
            create: jest.fn(),
          },
        },
      ],
    })
      .overrideGuard(AuthGuard)
      .useValue(mockAuthGuard)

      .compile();

    resolver = module.get<UserResolver>(UserResolver);
    userService = module.get<UserService>(UserService);
  });

  it('定義されているべき', () => {
    expect(resolver).toBeDefined();
  });

  describe('findAll', () => {
    it('ユーザーの配列を返すべき', async () => {
      const result = [new User()];
      jest.spyOn(userService, 'findAll').mockResolvedValue(result);
      expect(await resolver.findAll()).toBe(result);
    });
  });

  describe('findOne', () => {
    it('単一のユーザーを返すべき', async () => {
      const user = new User();
      const decodedIdToken: DecodedIdToken = {
        uid: 'test-uid',
        email: 'test@example.com',
      } as DecodedIdToken;
      jest.spyOn(userService, 'findOneByUUID').mockResolvedValue(user);
      expect(
        await resolver.findOne({
          req: { uuid: decodedIdToken.uid, email: decodedIdToken.email },
        }),
      ).toBe(user);
    });
  });

  describe('createUser', () => {
    it('ユーザーを作成して返すべき', async () => {
      const user = new User();
      const decodedIdToken: DecodedIdToken = {
        uid: 'test-uid',
        email: 'test@example.com',
      } as DecodedIdToken;
      const createUserOnlyNameInput: CreateUserOnlyNameInput = {
        name: 'Test User',
      };
      jest.spyOn(userService, 'create').mockResolvedValue(user);
      expect(
        await resolver.createUser(createUserOnlyNameInput, {
          req: { uuid: decodedIdToken.uid, email: decodedIdToken.email },
        }),
      ).toBe(user);
    });
  });
});

5. module作成

moduleを作成していきます

zsh

docker compose exec backend npx nest g mo user

問題なければbackend/src/user/user.module.tsが作成されるのでコードを書いていきます
今まで作成してきたUser関連のファイルを呼んであげます

backend/src/user/user.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './entities/user.entity';
import { UserResolver } from './user.resolver';
import { UserService } from './user.service';

@Module({
  imports: [TypeOrmModule.forFeature([User])],
  providers: [UserService, UserResolver],
})
export class UserModule {}

app.module.tsを整える

ここまで来たら最後にapp.module.tsを整えます
module類は自動で追加されています
ただ、serviceは追加されていないので追加してあげます

backend/src/app.module.ts

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { GraphQLModule } from '@nestjs/graphql';
import { TypeOrmModule } from '@nestjs/typeorm';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { FirebaseAdminModule } from './firebase-admin/firebase-admin.module';
import { FirebaseAdminService } from './firebase-admin/firebase-admin.service';
import { UserModule } from './user/user.module';

const configService = new ConfigService();

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      playground: true,
      installSubscriptionHandlers: true,
      debug: true,
      sortSchema: true,
    }),
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: configService.get('POSTGRES_HOST'),
      port: configService.get('POSTGRES_PORT'),
      username: configService.get('POSTGRES_USER'),
      password: configService.get('POSTGRES_PASSWORD'),
      database: configService.get('POSTGRES_DB'),
      schema: configService.get('POSTGRES_SCHEMA'),
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
    UserModule,
    FirebaseAdminModule,
  ],
  controllers: [AppController],
  providers: [
    AppService,
+    FirebaseAdminService,
  ],
})
export class AppModule {}

問題なければnestのログでエラーなく実行されているはずです

zsh

docker compose logs -f backend

docker compose log -f backend

backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [NestFactory] Starting Nest application...
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] TypeOrmModule dependencies initialized +45ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] FirebaseAdminModule dependencies initialized +0ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] AppModule dependencies initialized +0ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] GraphQLSchemaBuilderModule dependencies initialized +0ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] GraphQLModule dependencies initialized +1ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] TypeOrmCoreModule dependencies initialized +50ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] TypeOrmModule dependencies initialized +0ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [InstanceLoader] UserModule dependencies initialized +1ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [RoutesResolver] AppController {/}: +3ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [RouterExplorer] Mapped {/, GET} route +1ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [GraphQLModule] Mapped {/graphql, POST} route +57ms
backend-1  | [Nest] 207  - 11/27/2024, 11:49:37 PM     LOG [NestApplication] Nest application successfully started +28ms

下記にアクセスして添付画像のplaygroundが表示されていればバックエンド側の実装完了になります

フロントエンド実装

インストール

zsh

npm install --save @apollo/client firebase graphql graphql-request react-router-dom @types/react-dom
npm install --save-dev @graphql-codegen/cli @graphql-codegen/near-operation-file-preset @graphql-codegen/typescript @graphql-codegen/typescript-graphql-request @graphql-codegen/typescript-msw @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/typescript-resolvers @testing-library/dom @testing-library/jest-dom @testing-library/react jsdom msw vite vitest

codegenの設定ファイル作成

自分自身がよく使っている設定ではありますが記載していきます

zsh

touch frontend/codegen.ts

frontend/codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: "../backend/src/schema.gql",
  documents: "src/**/*.gql",
  hooks: {
    afterAllFileWrite: ["prettier --write"],
  },
  generates: {
    "src/types/graphql.gen.ts": {
      plugins: [
        "@graphql-codegen/typescript",
        "@graphql-codegen/typescript-resolvers",
      ],
      config: {
        enumsAsTypes: true,
        namingConvention: "keep",
        avoidOptionals: true,
        scalars: {
          BigInt: " string",
          ISO8601Date: "string",
          ISO8601DateTime: "string",
        },
      },
    },
    "src/": {
      preset: "near-operation-file-preset",
      presetConfig: {
        extension: ".gen.ts",
        baseTypesPath: "types/graphql.gen.ts",
      },
      plugins: [
        "@graphql-codegen/typescript-operations",
        "@graphql-codegen/typescript-react-apollo",
        "@graphql-codegen/typescript-msw",
      ],
      config: {
        gqlImport: "@apollo/client#gql",
        constEnums: true,
        reactApolloVersion: 3,
        withComponent: false,
        withHOC: false,
        withHooks: true,
        enumsAsTypes: true,
        namingConvention: "keep",
        avoidOptionals: true,
      },
    },
  },
};

export default config;

コードが書けたらpackage.jsonのscriptsにcodegenの実行コマンドを追加していきます

frontend/package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
+    "codegen": "graphql-codegen --config codegen.ts",
    "test": "vitest"
  },
  ...
}

テスト周りの設定

オプション的な立ち位置のテストになるので説明はないです

frontend/setupTests.ts

import "@testing-library/jest-dom";
import { afterAll, afterEach, beforeAll, vi } from "vitest";
import * as UserGen from "./src/gql/user.gen";
import { mockAuthUser } from "./src/mocks/handlers";
import { server } from "./src/mocks/server";

export const mockIdToken = "mockIdToken";
export const mockUid = "mockUid";

beforeAll(() => server.listen({ onUnhandledRequest: "warn" }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

vi.mock(
  "firebase/auth",
  async (importOrigin: () => Promise<typeof import("firebase/auth")>) => {
    const actual = await importOrigin();
    return {
      ...actual,
      getAuth: () => ({
        onAuthStateChanged: vi.fn((callback) => {
          callback({
            uid: mockUid,
            displayName: mockAuthUser.name,
            getIdToken: vi.fn().mockResolvedValue(mockIdToken),
          });
        }),
        currentUser: null,
      }),
      createUserWithEmailAndPassword: async (email: string) => {
        const userCredential = {
          user: {
            uid: mockUid,
            email,
            getIdToken: vi.fn().mockResolvedValue(mockIdToken),
          },
        };
        return userCredential;
      },
      signInWithEmailAndPassword: async (email: string) => {
        const userCredential = {
          user: {
            uid: mockUid,
            email,
            getIdToken: vi.fn().mockResolvedValue(mockIdToken),
          },
        };
        return userCredential;
      },
      signOut: vi.fn().mockResolvedValue(undefined),
    };
  }
);

vi.mock("./src/gql/user.gen", async (importOrigin) => {
  const actual = (await importOrigin()) as typeof UserGen;
  return {
    ...actual,
    useGetUserLazyQuery: actual.useGetUserLazyQuery,
    useGetUsersLazyQuery: actual.useGetUsersLazyQuery,
    useCreateUserMutation: actual.useCreateUserMutation,
  };
});

beforeAll(() => {
  global.localStorage = {
    getItem: vi.fn(),
    setItem: vi.fn(),
    clear: vi.fn(),
    length: 0,
    key: vi.fn().mockReturnValue(null),
    removeItem: vi.fn(),
  };
});

テストの設定追加

frontend/vite.config.ts

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import { configDefaults } from "vitest/config";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    port: 3000,
  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./setupTests.ts",
+    include: ["**/__tests__/**/*.test.(tsx|ts)"],
+    exclude: [
+      ...configDefaults.exclude,
+      "**/assets/**",
+      "**/coverage/**",
+      "**/dist/**",
+      "src/app/types/**",
+      "**/*.config.ts",
+    ],
+    coverage: {
+      exclude: [
+        ...(configDefaults.coverage.exclude ?? []),
+        "**/assets/**",
+        "**/coverage/**",
+        "**/dist/**",
+        "src/app/types/**",
+        "**/*.config.ts",
+      ],
+    },
+  },
});

モック作成

frontend/src/mocks/handlers.ts

import { HttpResponse } from "msw";
import {
  mockCreateUserMutation,
  mockGetUserQuery,
  mockGetUsersQuery,
} from "../gql/user.gen";

export const mockUser = {
  name: "mock",
  email: "mock@example.com",
};

const mockUserPassword = "password1234";

export const mockAuthUser = {
  ...mockUser,
  password: mockUserPassword,
};

export const mockUsers = [
  { name: "John Doe", email: "john@example.com" },
  { name: "Jane Doe", email: "jane@example.com" },
];

export const handlers = [
  mockGetUserQuery(() => {
    return HttpResponse.json({
      data: {
        user: mockUser,
      },
    });
  }),

  mockGetUsersQuery(() => {
    return HttpResponse.json({
      data: {
        users: mockUsers,
      },
    });
  }),

  mockCreateUserMutation(({ variables }) => {
    const name = variables?.name as string;

    return HttpResponse.json({
      data: {
        createUser: {
          name,
          email: mockUser.email,
        },
      },
    });
  }),
];

frontend/src/mocks/server.ts

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

export const server = setupServer(...handlers);

gqlファイル作成

今回は

CreateUser
- ユーザーデータ作成を行うMutation
GetUser
- uuidを元にユーザーデータを取得するQuery
GetUsers
- 全ユーザーデータを取得するQuery

をの3つを記載します

zsh

mkdir -p frontend/gql
touch frontend/gql/user.gql

frontend/gql/user.gql

query GetUser {
  user {
    name
    email
  }
}

query GetUsers {
  users {
    name
    email
  }
}

mutation CreateUser($name: String!) {
  createUser(createUserOnlyNameInput: { name: $name }) {
    name
    email
  }
}

作成出来たらターミナルにてcodegenを実行してファイルを生成してください

zsh

npm run codegen

Firebase設定

Firebase周りの設定を書いていきます
多くの記事で見るようなコードになるため読みやすいかと思います

各ファイルの役割としては

firebaseInit.ts
- Firebaseの初期化を行う
firebase.ts
- バックエンド側に送るJWTを取得するための処理を持つ
useFirebase.ts
- 新規アカウント作成・ログイン・ログアウトの処理を持ったカスタムフック
- localStorageにJWTを入れていますが、実際に運用するプロジェクトではやらないようにしてください
  - チェック用に記載しています

zsh

mkdir frontend/src/auth
touch frontend/src/auth/firebaseInit.ts
touch frontend/src/auth/firebase.ts
touch frontend/src/auth/useFirebase.ts

frontend/src/auth/firebaseInit.ts

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

frontend/src/auth/firebase.ts

import { auth } from "./firebaseInit";

export const getIdToken = async (): Promise<string | null> => {
  return new Promise((resolve) => {
    auth.onAuthStateChanged(async (user) => {
      if (user) {
        const token = await user.getIdToken();
        resolve(token);
      } else {
        resolve(null);
      }
    });
  });
};

frontend/src/auth/useFirebase.ts

import { FirebaseError } from "firebase/app";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";
import { useCallback } from "react";
import { auth } from "./firebaseInit";

type FirebaseAuthArg = Record<"email" | "password", string>;

type FirebaseLogin = (arg: FirebaseAuthArg) => Promise<void>;
type FirebaseCreate = (arg: FirebaseAuthArg) => Promise<void>;

type UseFirebaseReturn = {
  firebaseLogin: FirebaseLogin;
  firebaseCreate: FirebaseCreate;
  firebaseLogout: () => Promise<void>;
};
type UseFirebase = () => UseFirebaseReturn;

export const useFirebase: UseFirebase = () => {
  const firebaseLogin = useCallback<FirebaseLogin>(
    async ({ email, password }) => {
      try {
        const userCredential = await signInWithEmailAndPassword(
          auth,
          email,
          password
        );

        // NOTE: Playgroundで実行用に
        const token = await userCredential.user.getIdToken();
        localStorage.setItem("jwtToken", token);
      } catch (error) {
        const message = handleFirebaseError(error);
        console.error("Error:", message);
      }
    },
    []
  );

  const firebaseCreate = useCallback<FirebaseCreate>(
    async ({ email, password }) => {
      try {
        const userCredential = await createUserWithEmailAndPassword(
          auth,
          email,
          password
        );
        const token = await userCredential.user.getIdToken();

        localStorage.setItem("jwtToken", token);
      } catch (error) {
        const message = handleFirebaseError(error);
        console.error("Error:", message);
      }
    },
    []
  );

  const firebaseLogout = useCallback(async () => {
    try {
      await signOut(auth);
    } catch (error) {
      const message = handleFirebaseError(error);
      console.error("Error:", message, error);
    }
    localStorage.removeItem("jwtToken");
  }, []);

  return {
    firebaseLogin,
    firebaseCreate,
    firebaseLogout,
  };
};

const handleFirebaseError = (error: unknown) => {
  if (error instanceof FirebaseError) {
    switch (error.code) {
      case "auth/user-not-found":
        return "ユーザーが見つかりません";
      case "auth/wrong-password":
        return "パスワードが間違っています";
      case "auth/email-already-in-use":
        return "このメールアドレスはすでに登録されています";
      case "auth/network-request-failed":
        return "ネットワークエラーが発生しました";
      default:
        return "エラー発生しました";
    }
  }
  return "不明なエラーが発生しました";
};

テスト

frontend/src/auth/__tests__/useFirebase.test.ts

import { renderHook } from "@testing-library/react";
import { FirebaseError } from "firebase/app";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { act } from "react";
import { describe, expect, it, vi } from "vitest";
import { mockIdToken } from "../../../setupTests";
import { mockAuthUser } from "../../mocks/handlers";
import { useFirebase } from "../useFirebase";

describe("useFirebase", () => {
  it("初期状態", () => {
    const { result } = renderHook(() => useFirebase());
    expect(result.current.firebaseCreate).toBeDefined();
    expect(result.current.firebaseLogin).toBeDefined();
    expect(result.current.firebaseLogout).toBeDefined();
  });

  it("ユーザー登録に成功する", async () => {
    const { result } = renderHook(() => useFirebase());

    await act(async () => {
      await result.current.firebaseCreate({
        email: mockAuthUser.email,
        password: mockAuthUser.password,
      });
    });

    expect(localStorage.setItem).toHaveBeenCalledWith("jwtToken", mockIdToken);
  });

  it("ログインに成功する", async () => {
    const { result } = renderHook(() => useFirebase());

    await act(async () => {
      await result.current.firebaseLogin({
        email: mockAuthUser.email,
        password: mockAuthUser.password,
      });
    });

    expect(localStorage.setItem).toHaveBeenCalledWith("jwtToken", mockIdToken);
  });

  it("ログアウトに成功する", async () => {
    const { result } = renderHook(() => useFirebase());

    await act(async () => {
      await result.current.firebaseLogout();
    });

    expect(localStorage.removeItem).toHaveBeenCalledWith("jwtToken");
  });

  it("ユーザー登録に失敗する", async () => {
    const networkError = new FirebaseError(
      "auth/network-request-failed",
      "Network error occurred"
    );

    const mockCreateUserWithEmailAndPassword = vi
      .fn()
      .mockRejectedValue(networkError) as typeof createUserWithEmailAndPassword;

    const originalCreateUserWithEmailAndPassword =
      createUserWithEmailAndPassword;

    (createUserWithEmailAndPassword as typeof mockCreateUserWithEmailAndPassword) =
      mockCreateUserWithEmailAndPassword;

    const { result } = renderHook(() => useFirebase());

    await act(async () => {
      try {
        await result.current.firebaseCreate({
          email: mockAuthUser.email,
          password: mockAuthUser.password,
        });
      } catch (error) {
        expect(error).toEqual(networkError);
      }
    });

    expect(mockCreateUserWithEmailAndPassword).toHaveBeenCalledTimes(1);
    expect(mockCreateUserWithEmailAndPassword).toHaveBeenCalledWith(
      expect.anything(),
      mockAuthUser.email,
      mockAuthUser.password
    );

    // 元の実装を復元
    (createUserWithEmailAndPassword as typeof mockCreateUserWithEmailAndPassword) =
      originalCreateUserWithEmailAndPassword;
  });
});

apolloClient設定

よくあるapolloClientのこーどになりますが、今回大事なのはgetIdToken()が記載されている箇所になります
バックエンドへ送る際のheaderにgetIdToken()で取得したJWTをセットして送る形にしています
ログインしていない場合は空文字を送るようにしています

zsh

mkdir frontend/src/configs
mkdir frontend/src/providers
touch frontend/src/configs/apolloClient.ts
touch frontend/src/providers/apolloProvider.ts

frontend/src/configs/apolloClient.ts

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { getIdToken } from "../auth/firebase";

const httpLink = createHttpLink({
  uri: import.meta.env.VITE_BACKEND_URI,
});

const authLink = setContext(async (_, { headers }) => {
  const token = await getIdToken();

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

export default client;

frontend/src/providers/apolloProvider.tsx

import { ApolloProvider as Provider } from "@apollo/client";
import { FC, ReactNode } from "react";
import client from "../configs/apolloClient";

interface ApolloProviderProps {
  children: ReactNode;
}

export const ApolloProvider: FC<ApolloProviderProps> = ({ children }) => {
  return <Provider client={client}>{children}</Provider>;
};

apolloProvider.tsxまで書けたらmain.tsxで呼んであげます
呼ぶことで全ページにて使用できるようにしてあげます

frontend/src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ApolloProvider } from "./providers/apolloProvider.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ApolloProvider>
      <App />
    </ApolloProvider>
  </StrictMode>
);

ページ作成

作成するページは

create.tsx
- 新規アカウント作成ページ
login.tsx
- ログインページ
userWithLogin.tsx
- ログインしたアカウントのみデータ取得出来るページ
userWithoutLogin.tsx
- ログイン状況関係なくデータ取得出来るページ

になります

zsh

mkdir frontend/src/page
touch frontend/src/page/create.tsx
touch frontend/src/page/login.tsx
touch frontend/src/page/userWithLogin.tsx
touch frontend/src/page/userWithoutLogin.tsx

frontend/src/page/create.tsx

import { ChangeEvent, FC, useCallback, useState } from "react";
import { useFirebase } from "../auth/useFirebase";
import { useCreateUserMutation } from "../gql/user.gen";

export const Create: FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [user, setUser] = useState<{ name: string; email: string } | null>(
    null
  );

  const { firebaseCreate } = useFirebase();
  const [createUser] = useCreateUserMutation();

  const createHandler = useCallback(async () => {
    try {
      await firebaseCreate({ email, password });
      const newUser = await createUser({ variables: { name } });
      console.dir(newUser, { depth: null });
      if (newUser.data) {
        const { name, email } = newUser.data.createUser;
        setUser({ name, email });
      }
    } catch (error) {
      console.error("Create failed:", error);
    }
  }, [firebaseCreate, email, password, createUser, name]);

  const setterEmail = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value),
    []
  );

  const setterPassword = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value),
    []
  );

  const setterName = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => setName(e.target.value),
    []
  );

  return (
    <div>
      <h1>Create</h1>

      <div>
        <label htmlFor="email">Email</label>
        <br />
        <input id="email" type="text" onChange={setterEmail} />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <br />
        <input id="password" type="password" onChange={setterPassword} />
      </div>
      <div>
        <label htmlFor="name">Name</label>
        <br />
        <input id="name" type="text" onChange={setterName} />
      </div>

      <br />

      <button onClick={createHandler}>新規作成</button>

      {user && (
        <div>
          <p>
            Name: <span>{user.name}</span>
          </p>
          <p>
            Email: <span>{user.email}</span>
          </p>
        </div>
      )}
    </div>
  );
};

frontend/src/page/login.tsx

import { FC, useCallback, useState } from "react";
import { useFirebase } from "../auth/useFirebase";

export const Login: FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const { firebaseLogin, firebaseLogout } = useFirebase();

  const loginHandler = useCallback(
    async () =>
      await firebaseLogin({
        email,
        password,
      }),
    [firebaseLogin, email, password]
  );

  const setterEmail = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value),
    []
  );

  const setterPassword = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value),
    []
  );

  return (
    <div>
      <h1>Login</h1>

      <div>
        <label htmlFor="email">Email</label>
        <br />
        <input id="email" type="text" onChange={setterEmail} />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <br />
        <input id="password" type="password" onChange={setterPassword} />
      </div>

      <br />

      <button onClick={loginHandler}>ログイン</button>
      <button onClick={firebaseLogout}>ログアウト</button>
    </div>
  );
};

frontend/src/page/userWithLogin.tsx

import { FC, useEffect } from "react";
import { useGetUserLazyQuery } from "../gql/user.gen";

export const UserWithLogin: FC = () => {
  const [getUser, { loading, data, error }] = useGetUserLazyQuery({
    fetchPolicy: "cache-and-network",
  });

  useEffect(() => {
    getUser();
  }, [getUser]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>UserWithLogin</h1>
      {data ? (
        <div>
          <h1>{data.user.name}</h1>
          <p>{data.user.email}</p>
        </div>
      ) : (
        <p>Not Data</p>
      )}
    </div>
  );
};

frontend/src/page/userWithoutLogin.tsx

import { FC, useEffect } from "react";
import { useGetUsersLazyQuery } from "../gql/user.gen";

export const UserWithoutLogin: FC = () => {
  const [getUsers, { data, loading, error }] = useGetUsersLazyQuery({
    fetchPolicy: "network-only",
  });

  useEffect(() => {
    getUsers();
  }, [getUsers]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>UserWithoutLogin</h1>
      {data?.users.map((user, index) => (
        <div key={index}>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
};

テスト

frontend/src/page/__tests__/create.test.tsx

import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, Mock, vi } from "vitest";
import { useFirebase } from "../../auth/useFirebase";
import { mockAuthUser } from "../../mocks/handlers";
import { ApolloProvider } from "../../providers/apolloProvider";
import { Create } from "../create";

vi.mock("../../auth/useFirebase.ts", () => ({
  useFirebase: vi.fn(),
}));

const mockFirebaseCreate = vi.fn();

beforeEach(() => {
  (useFirebase as Mock).mockReturnValue({
    firebaseCreate: mockFirebaseCreate,
  });
  vi.clearAllMocks();
});

describe("create", () => {
  it("新規作成ボタンをクリックでユーザー作成処理が成功する", async () => {
    render(
      <ApolloProvider>
        <Create />
      </ApolloProvider>
    );

    fireEvent.change(screen.getByLabelText("Email"), {
      target: { value: mockAuthUser.email },
    });
    fireEvent.change(screen.getByLabelText("Password"), {
      target: { value: mockAuthUser.password },
    });
    fireEvent.change(screen.getByLabelText("Name"), {
      target: { value: mockAuthUser.name },
    });

    fireEvent.click(screen.getByText("新規作成"));

    await waitFor(() => {
      expect(mockFirebaseCreate).toHaveBeenCalledWith({
        email: mockAuthUser.email,
        password: mockAuthUser.password,
      });
    });

    expect(await screen.findByText(mockAuthUser.name)).toBeInTheDocument();
    expect(await screen.findByText(mockAuthUser.email)).toBeInTheDocument();
  });
});

frontend/src/page/__tests__/login.test.tsx

import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, Mock, vi } from "vitest";
import { useFirebase } from "../../auth/useFirebase";
import { mockAuthUser } from "../../mocks/handlers";
import { Login } from "../login";

vi.mock("../../auth/useFirebase.ts", () => ({
  useFirebase: vi.fn(),
}));

const mockFirebaseLogin = vi.fn();
const mockFirebaseLogout = vi.fn();

beforeEach(() => {
  (useFirebase as Mock).mockReturnValue({
    firebaseLogin: mockFirebaseLogin,
    firebaseLogout: mockFirebaseLogout,
  });
  vi.clearAllMocks();
});

describe("login", () => {
  it("ログインボタンをクリックでログイン処理が成功する", async () => {
    render(<Login />);

    fireEvent.change(screen.getByLabelText("Email"), {
      target: { value: mockAuthUser.email },
    });
    fireEvent.change(screen.getByLabelText("Password"), {
      target: { value: mockAuthUser.password },
    });

    fireEvent.click(screen.getByText("ログイン"));

    await waitFor(() => {
      expect(mockFirebaseLogin).toHaveBeenCalledWith({
        email: mockAuthUser.email,
        password: mockAuthUser.password,
      });
    });
  });

  it("ログアウトボタンをクリックしてログアウト処理が成功する", async () => {
    render(<Login />);

    fireEvent.click(screen.getByText("ログアウト"));

    await waitFor(() => {
      expect(mockFirebaseLogout).toHaveBeenCalled();
    });
  });
});

frontend/src/page/__tests__/userWithLogin.test.tsx

import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { mockUser } from "../../mocks/handlers";
import { ApolloProvider } from "../../providers/apolloProvider";
import { UserWithLogin } from "../userWithLogin";

describe("テスト", () => {
  it("ローディングが表示されること", () => {
    render(
      <ApolloProvider>
        <UserWithLogin />
      </ApolloProvider>
    );

    expect(screen.getByText("Loading...")).toBeInTheDocument();
  });

  it("ユーザーデータが表示されること", async () => {
    render(
      <ApolloProvider>
        <UserWithLogin />
      </ApolloProvider>
    );

    expect(await screen.findByText(mockUser.name)).toBeInTheDocument();
    expect(await screen.findByText(mockUser.email)).toBeInTheDocument();
  });
});

frontend/src/page/__tests__/userWithoutLogin.test.tsx

import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { mockUsers } from "../../mocks/handlers";
import { ApolloProvider } from "../../providers/apolloProvider";
import { UserWithoutLogin } from "../userWithoutLogin";

describe("UserWithoutLogin", () => {
  it("ローディングが表示される", () => {
    render(
      <ApolloProvider>
        <UserWithoutLogin />
      </ApolloProvider>
    );

    expect(screen.getByText("Loading...")).toBeInTheDocument();
  });

  it("ユーザーデータが表示される", async () => {
    render(
      <ApolloProvider>
        <UserWithoutLogin />
      </ApolloProvider>
    );

    mockUsers.forEach(async (user) => {
      expect(await screen.findByText(user.name)).toBeInTheDocument();
      expect(await screen.findByText(user.email)).toBeInTheDocument();
    });
  });
});

ルーティング設定

ページの作成完了致しましたので最後にルーティング設定をしていきます
実運用ならルーティングに権限処理を実装すべきですが今回はオミットしています

mkdir frontend/src/router
touch frontend/src/router/router.tsx

frontend/src/router/router.tsx

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import { Create } from "../page/create";
import { Login } from "../page/login";
import { UserWithLogin } from "../page/userWithLogin";
import { UserWithoutLogin } from "../page/userWithoutLogin";

export const Router = () => {
  return (
    <BrowserRouter>
      <Link to="/">Login</Link> | <Link to="/create">Create</Link> |{" "}
      <Link to="/userWithoutLogin">userWithoutLogin</Link> |{" "}
      <Link to="/userWithLogin">userWithLogin</Link> |{" "}
      <Routes>
        <Route path="/" Component={Login} />
        <Route path="/userWithoutLogin" Component={UserWithoutLogin} />
        <Route path="/userWithLogin" Component={UserWithLogin} />
        <Route path="/create" Component={Create} />
      </Routes>
    </BrowserRouter>
  );
};

router.tsxが書けたらApp.tsxを更新していきます

frontend/src/App.tsx

import "./App.css";
import { Router } from "./router/router";

function App() {
  return <Router />;
}

export default App;

動作チェック

ここまで実装できたらフロント側問題なく表示されているか確認してみます

ログインページ
新規アカウント作成ページ
ログイン状態関係なくデータ取得できるページ
ログイン状況関係なくデータ取得出来るページ(現状ログインしていないためToken not foundと表示されている)

上手く動くところを見ると楽しいですね

今後

今回はuuidとemailのみアカウント情報から取得していますが
カスタムクレームを使用すればより厳格な認証が行えると思うのでそちらも試せていければと思っています