はじめに
前回は企画、要件定義・設計までを記事にしていきました。
今回の記事では管理者の認証機能のUI作成をやっていきたいと思います。
プロジェクトの作成
ドキュメントを見ながら進めていきましょう。
How to set up a Next.js project
①npx create-next-app@latest
プロジェクト名はplatformとして作成していきます。
今回は全てYesで進めていきます。
platformディレクトリに移動したら以下のコマンドを実行していきます。
②npm install next@latest react@latest react-dom@latest
以下のコマンドを実行して開発環境を立ち上げてみましょう。
③npx next dev
ここまででプロジェクトの作成は完了です。
ファイルの整理
①publicフォルダの中身を削除
②layout.tsxファイルの言語を英語から日本語に変更
return (
<html lang="ja">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
③フォントの削除
layout.tsxを以下のように変更し、fontsファイルを丸ごと削除
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<body>
{children}
</body>
</html>
);
}
④ファイルを削除
page.tsx
⑤faviconを移動
faviconをpublicディレクトリに移動させる
⑥ルーティングの作成
app
┗blog
┗page.tsx
┗dashboard
┗login
┗page.tsx
┗page.tsx
layout.tsx
blog/page.tsx
import React from 'react'
const Blog = () => {
return (
<div>blog</div>
)
}
export default Blog;
dashboard/page.tsx
import React from 'react'
const Dashboard = () => {
return (
<div>dashboard</div>
)
}
export default Dashboard;
dashboard/login/page.tsx
import React from 'react'
const Login = () => {
return (
<div>login</div>
)
}
export default Login;
ここまででページ遷移するためのルーティングの設定が完了しました。
管理者ログインページの認証フォームUI作成
shadcnのインストール
npx shadcn@latest init -dを実行
あれ、エラーが出た。
No Tailwind CSS configuration found at /Users/sakuya/app/platform.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
どうやらTailwind CSSの設定がうまくいっていないようです。
まずはインストールがうまくいっているかの確認を行いましょう
npm install -D tailwindcss postcss autoprefixerを実行
私は上記のコマンドで対応できました。
再度shadcnをインストールするコマンドを実行して無事に完了しました。
shadcnを使ってみる
npx shadcn@latest add card
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add label
npx shadcn@latest add select
この5つのコマンドを実行したら以下をサイトからコピペするだけ
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div className="flex flex-col space-y-1.5">
<Label htmlFor="framework">Framework</Label>
<Select>
<SelectTrigger id="framework">
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent position="popper">
<SelectItem value="next">Next.js</SelectItem>
<SelectItem value="sveltekit">SvelteKit</SelectItem>
<SelectItem value="astro">Astro</SelectItem>
<SelectItem value="nuxt">Nuxt.js</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>
そうすると、、、
簡単にフォームっぽいものができてしまいました！
shadcnをカスタマイズする
まずはゴールを確認しましょう
以下のように修正していきます。
login/page.tsx
import React from 'react'
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
const Login = () => {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<Card className="w-full max-w-md">
<CardHeader>
<CardTitle className="text-2xl text-center">管理者ログイン</CardTitle>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">メールアドレス</Label>
<Input id="name" />
</div>
</div>
</form>
</CardContent>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">パスワード</Label>
<Input id="name" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button type="submit" className="w-full">ログイン</Button>
</CardFooter>
</Card>
</div>
)
}
export default Login;
完成系はこちら
いい感じに修正できたと思います。
*ディレクトリ構造の修正を以下のように行いました。
DBの作成
次は認証を行うためにdbを作っていきましょう。
DBは以下のようになっています。
supabase
プロジェクトの作成
new projectからプロジェクトを作成する。
リージョンは日本を選択してください。
apiディレクトリと.envファイルの作成
appディレクトリと同階層にapiディレクトリを作成。
その後.envファイルを作成して環境変数を記述していきます。
自分自身のProject URLとAPI Keyを入力してください。
.env
NEXT_PUBLIC_SUPABASE_URL=Project URL
NEXT_PUBLIC_API_ANON_KEY=API Key
これでsupabaseと接続・操作ができるようになりました。
Prisma
Prismaの初期設定
-
api/libフォルダーを作成しprismaClient.tsファイルを作成しましょう。
-
npm install -D prismaを実行してprismaを入れていきます。 -
apiディレクトリに移動して
npx prisma initを実行します。
そうするとapiディレクトリにprismaフォルダーが作成され、.envファイルに新たに環境変数が追加されていると思います。 -
supabaseの設定からdatabaseを選択してdatabaseURLの環境変数をコピーして、先ほど.envファイルに作成された環境変数にコピペします。
ここまででprismaの初期設定が終わったのでdbを作っていきます。
データベースのモデル作成
公式ドキュメントにmodelがあるのでこれを編集して作成していきます。
schema.prisma
model User {
id Int @id @default(autoincrement())
email String @unique
name String
password String
articles article[]
createAt DateTime @default(now())
updateAt DateTime @updatedAt
}
model article {
id Int @id @default(autoincrement())
title String
content String
status Boolean @default(true)
author User @relation(fields: [authorId], references: [id])
authorId Int
createAt DateTime @default(now())
updateAt DateTime @updatedAt
}
当初想定していた設計を少し変更しました。
ちょっとした余談なのですが、設計を作り切るのは難しいですね。
修正後はこんな感じ
マイグレーション
-
apiディレクトリで以下のコマンドを実行
npx prisma migrate dev --name init -
prisma配下にmigrationsが作成されていることを確認,supabaseの方も確認するとdbが作成されていると思います。
-
supabaseから直接管理者アカウントのデータを追加
-
ここまででprismaの全体の設定が完了！
Hono
次はバックエンドの処理を追加していきます。
具体的には、
メールアドレス、パスワードが一致していた場合、ログインができて/applications/dashboardに遷移できる
また、ログインできていないのにapplications/dashboardに遷移できないようにする。
この二つの処理を実装していきましょう。
*今回ではセキュリティーの実装はしません。今後追加します。
Honoと必要なものを追加
npm add hono
npm install @hono/node-server
npm install --save bcrypt
npm install --save-dev ts-node
ディレクトリの追加
以下のように作成してください。
src/
├── api/
│ ├── lib/
│ │ └── prismaClient.ts
│ ├── middleware/
│ │ ├── auth/
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── index.ts
│ ├── prisma/
│ │ ├── migrations/
│ │ │ └── 20241124063915_init/
│ │ │ └── migration.sql
│ │ └── schema.prisma
│ ├── routes/
│ │ └── dashboard.ts
│ ├── utils/
│ │ └── jwt.ts
│ ├── index.ts
│ └── tsconfig.json
│
└── app/
├── applications/
│ ├── blog/
│ │ └── page.tsx
│ └── dashboard/
│ ├── login/
│ │ └── page.tsx
│ └── page.tsx
├── components/
│ └── ui/
│ ├── card.tsx
│ └── select.tsx
├── middleware/
│ ├── auth/
│ │ ├── hooks.ts
│ │ ├── index.tsx
│ │ └── types.ts
│ └── index.ts
├── styles/
│ └── globals.css
└── layout.tsx
認証のイベント追加
dashboard/login/page.tsx
'use client'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from "@/app/components/ui/button"
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/app/components/ui/card"
import { Input } from "@/app/components/ui/input"
import { Label } from "@/app/components/ui/label"
const Login = () => {
const router = useRouter()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError('')
try {
const res = await fetch('http://localhost:4000/dashboard/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
})
const data = await res.json()
if (!res.ok) {
throw new Error(data.message || 'ログインに失敗しました')
}
if (data.success && data.token) {
localStorage.setItem('token', data.token)
router.push('/applications/dashboard')
} else {
throw new Error('認証に失敗しました')
}
} catch (err) {
if (err instanceof Error) {
setError(err.message)
} else {
setError('ログインに失敗しました')
}
console.error('Login error:', err)
}
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<Card className="w-full max-w-md">
<CardHeader>
<CardTitle className="text-2xl text-center">管理者ログイン</CardTitle>
</CardHeader>
{error && (
<div className="px-6 py-2 text-red-500 text-center">{error}</div>
)}
<form onSubmit={handleSubmit}>
<CardContent>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="email">メールアドレス</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
</div>
</CardContent>
<CardContent>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="password">パスワード</Label>
<Input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
</div>
</CardContent>
<CardFooter className="flex justify-between">
<Button type="submit" className="w-full">ログイン</Button>
</CardFooter>
</form>
</Card>
</div>
)
}
export default Login
honoでapiサーバー構築
api/index.ts
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { dashboard } from './routes/dashboard'
const app = new Hono()
// CORSの設定
app.use('/*', cors({
origin: ['http://localhost:3000'],
allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization'],
exposeHeaders: ['Content-Length', 'X-Kuma-Revision'],
maxAge: 600,
credentials: true,
}))
// ルートの設定
app.route('/dashboard', dashboard)
// サーバーの起動
const port = 4000
console.log(`Server is running on port ${port}`)
serve({
fetch: app.fetch,
port
})
次にルート先を設定します。
routes/dashboard.ts
import { Hono } from 'hono'
// import bcrypt from 'bcrypt'
import { generateToken } from '../utils/jwt'
import { authMiddleware } from '../middleware/auth'
import { prisma } from '../lib/prismaClient'
type Variables = {
userId: number;
};
const dashboard = new Hono<{ Variables: Variables }>()
dashboard.post('/login', async (c) => {
try {
const { email, password } = await c.req.json()
const user = await prisma.user.findUnique({
where: { email },
select: {
id: true,
email: true,
password: true
}
})
if (!user) {
return c.json({
success: false,
message: 'メールアドレスまたはパスワードが間違っています'
}, 401)
}
// const isValid = await bcrypt.compare(password, user.password)
const isValid = password === user.password
if (!isValid) {
return c.json({
success: false,
message: 'メールアドレスまたはパスワードが間違っています'
}, 401)
}
const token = generateToken(user.id)
return c.json({
success: true,
token,
userId: user.id
})
} catch (error) {
console.error('Login error:', error)
return c.json({
success: false,
message: 'ログイン処理中にエラーが発生しました'
}, 500)
}
})
dashboard.use('/protected/*', authMiddleware)
dashboard.get('/protected/user', async (c) => {
const userId = c.get('userId')
const user = await prisma.user.findUnique({
where: { id: userId },
select: {
id: true,
email: true,
name: true,
createAt: true
}
})
if (!user) {
return c.json({ message: 'ユーザーが見つかりません' }, 404)
}
return c.json(user)
})
export { dashboard }
次に認証が成功した後のトークン作成する処理を実装しましょう。
utils/jwt.ts
import jwt from 'jsonwebtoken'
const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key'
interface JWTPayload {
userId: number
}
export const generateToken = (userId: number): string => {
return jwt.sign({ userId }, JWT_SECRET, { expiresIn: '24h' })
}
export const verifyToken = (token: string): JWTPayload | null => {
try {
const decoded = jwt.verify(token, JWT_SECRET) as JWTPayload
return decoded
} catch {
return null
}
}
次にapiとjwtの認証チェックの処理を記述していきましょう。
auth/index.ts
import { Context, Next } from 'hono'
import { verifyToken } from '../../utils/jwt'
import type { AuthMiddlewareContext } from './types'
export const authMiddleware = async (c: Context<{ Variables: AuthMiddlewareContext }>, next: Next) => {
const token = c.req.header('Authorization')?.split(' ')[1]
if (!token) {
return c.json({ message: '認証が必要です' }, 401)
}
const decoded = verifyToken(token)
if (!decoded) {
return c.json({ message: 'トークンが無効です' }, 401)
}
c.set('userId', decoded.userId)
await next()
}
次は型定義です。
auth/types.ts
export interface JWTPayload {
userId: number;
}
export interface AuthMiddlewareContext {
userId: number;
}
処理を外で使えるようにしましょう。
middleware/index.ts
export { authMiddleware } from './auth'
export type { AuthMiddlewareContext, JWTPayload } from './auth/types'
次はアプリ側のmiddlewareの処理を記述していきましょう。
まずは、HOCの実装です。
HOCは「コンポーネントを受け取って、新しいコンポーネントを返す関数」です。簡単に言うと、コンポーネントを包装（ラップ）して機能を追加するパターンです。
auth/index.tsx
'use client'
import React, { useEffect } from 'react'
import { useAuth } from './hooks'
export function withAuth<P extends object>(
WrappedComponent: React.ComponentType<P>
) {
return function WithAuthComponent(props: P) {
const { isAuthenticated, isLoading, checkAuth } = useAuth()
useEffect(() => {
checkAuth()
}, [checkAuth])
if (isLoading) return <div>Loading...</div>
if (!isAuthenticated) return null
return <WrappedComponent {...props} />
}
}
次に認証ロジックとAPI通信の追加です。
auth/hooks.ts
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
export const useAuth = () => {
const router = useRouter()
const [isAuthenticated, setIsAuthenticated] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const verifyAuth = async (token: string): Promise<boolean> => {
try {
const res = await fetch('http://localhost:4000/dashboard/protected/user', {
headers: {
'Authorization': `Bearer ${token}`
}
})
return res.ok
} catch {
return false
}
}
const checkAuth = async () => {
const token = localStorage.getItem('token')
if (!token) {
setIsAuthenticated(false)
setIsLoading(false)
router.push('/applications/dashboard/login')
return false
}
const isValid = await verifyAuth(token)
if (!isValid) {
setIsAuthenticated(false)
setIsLoading(false)
localStorage.removeItem('token')
router.push('/applications/dashboard/login')
return false
}
setIsAuthenticated(true)
setIsLoading(false)
return true
}
return { isAuthenticated, isLoading, checkAuth }
}
型定義の集約を行いましょう
auth/types.ts
export interface AuthState {
isAuthenticated: boolean;
isLoading: boolean;
}
export interface AuthResponse {
success: boolean;
token?: string;
userId?: number;
message?: string;
}
export interface AuthHook {
isAuthenticated: boolean;
isLoading: boolean;
checkAuth: () => Promise<boolean>;
}
最後に外で使えるようにしましょう。
middleware/index.ts
export { withAuth } from './auth'
export { useAuth } from './auth/hooks'
export type { AuthState, AuthResponse, AuthHook } from './auth/types'
こんな感じの認証になりました。
管理者認証の動画
終わりに
認証機能を今回は簡単に実装しました。今後はセキュリティー面を修正する必要がありますね。
また、今回認証機能を作るにあたり認証と認可の違いだったり、さまざまな認証方法があったりととても奥深いものだと思いました。
今後いろんな認証方法を実装していき学んでいきたいと思いました。