DEV Community: Yu Hamada

Deploy Next.js Supabase App to Cloud Run using Artifact Registry and Secrets Manager

Yu Hamada — Sun, 09 Feb 2025 05:55:45 +0000

Introduction
Step 1: Set Up Your Google Cloud Project
- Create a Google Cloud Project
- Install Google Cloud SDK
- Enable the following APIs
Step 2: Store Secrets in Google Secret Manager
- Use the gcloud CLI to create secrets
- Grant the Cloud Run service account access to the secrets
Step 3: Set Up Artifact Registry
- Create a Docker repository Artifact Registry Repository
- Authenticate Docker to Artifact Registry
Step 4: Dockerize Your Next.js App
- Create a Dockerfile in the root of your Next.js project
- Test the Docker Image Locally
Step 5: Push Docker Image to Artifact Registry
- Build the Docker Image
- Push the Docker Image
Step 6: Deploy to Cloud Run
Caution
- Verify Docker Authentication
Next Step

Introduction

Artifact Registry is a service on Google Cloud for storing and managing container images and other artifacts. While there is a similar service called Container Registry, it is deprecated as of June 26, 2024, and will be shut down on March 18, 2025. Therefore, it is recommended to use Artifact Registry.

Step 1: Set Up Your Google Cloud Project

Create a Google Cloud Project
- Go to the Google Cloud Console.
- Click on the project dropdown and select New Project.
- Give your project a name and click Create.
Install Google Cloud SDK
- Install the Google Cloud SDK on your local machine.
- Authenticate and set your project

gcloud auth login
gcloud config set project YOUR_PROJECT_ID

Enable the following APIs
- Cloud Run API
- Secret Manager API
- Artifact Registry API

gcloud services enable run.googleapis.com secretmanager.googleapis.com artifactregistry.googleapis.com

Step 2: Store Secrets in Google Secret Manager

Use the gcloud CLI to create secrets for each environment variable

echo -n "your-supabase-url" | gcloud secrets create NEXT_PUBLIC_SUPABASE_URL --data-file=-
echo -n "your-anon-key" | gcloud secrets create NEXT_PUBLIC_SUPABASE_ANON_KEY --data-file=-
echo -n "your-service-role-key" | gcloud secrets create SUPABASE_SERVICE_ROLE_KEY --data-file=-

Grant the Cloud Run service account access to the secrets

gcloud secrets add-iam-policy-binding NEXT_PUBLIC_SUPABASE_URL \
    --member=serviceAccount:YOUR_PROJECT_NUMBER-compute@developer.gserviceaccount.com \
    --role=roles/secretmanager.secretAccessor

Repeat for all secrets, replacing NEXT_PUBLIC_SUPABASE_URL with the respective secret name.

Step 3: Set Up Artifact Registry

Create a Docker repository Artifact Registry Repository

gcloud artifacts repositories create YOUR_PROJECT_REPOSITORY_NAME \
    --repository-format=docker \
    --location=YOUR_REGION \      // e.g. us-central1
    --description="Docker repository for Next.js app"

Authenticate Docker to Artifact Registry

gcloud auth configure-docker YOUR_REGION-docker.pkg.dev

Step 4: Dockerize Your Next.js App

Create a Dockerfile in the root of your Next.js project

# Use the official Node.js image
FROM node:18-alpine AS builder

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the application
RUN npm run build

# Use a smaller image for the final stage
FROM node:18-alpine

# Set the working directory
WORKDIR /app

# Copy built files from the builder stage
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/node_modules ./node_modules

# Expose the port
EXPOSE 3000

# Start the app
CMD ["npm", "start"]

Test the Docker Image Locally
- Build and run the Docker image

 docker build -t YOUR_PROJECT_NAME .
 docker run -p 3000:3000 YOUR_PROJECT_NAME

Verify the app runs correctly at http://localhost:3000.

Step 5: Push Docker Image to Artifact Registry

Build the Docker Image

docker build -t YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/YOUR_PROJECT_REPOSITORY_NAME/YOUR_PROJECT_IMAGE_NAME:latest .

// If you are using M1 Mac
docker build --platform linux/amd64 -t YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/YOUR_PROJECT_REPOSITORY_NAME/YOUR_PROJECT_IMAGE_NAME:latest .

Push the Docker Image

docker push YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/YOUR_PROJECT_REPOSITORY_NAME/YOUR_PROJECT_IMAGE_NAME:latest

Step 6: Deploy to Cloud Run

gcloud run deployYOUR_PROJECT_IMAGE_NAME \
  --image YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/YOUR_PROJECT_REPOSITORY_NAME/YOUR_PROJECT_IMAGE_NAME:latest \
  --platform managed \
  --region YOUR_REGION \
  --allow-unauthenticated \
  --update-secrets=\
NEXT_PUBLIC_SUPABASE_URL=NEXT_PUBLIC_SUPABASE_URL:latest,
NEXT_PUBLIC_SUPABASE_ANON_KEY=NEXT_PUBLIC_SUPABASE_ANON_KEY:latest,
SUPABASE_SERVICE_ROLE_KEY=SUPABASE_SERVICE_ROLE_KEY:latest,

Caution

Since you're encountering the Permission "artifactregistry.repositories.uploadArtifacts" deniederror despite having the correct IAM roles and repository setup, make sure Verify Docker Authentication to run this code:

cat ~/.docker/config.json

The output should include:

{
  "credHelpers": {
    "[YOUR_REGION]-docker.pkg.dev": "gcloud"
  }
}

Next Step

This article summarizes the process of setting up a Google Cloud Project, storing secrets in Google Secret Manager, configuring Artifact Registry, and deploying a Dockerized Next.js application.
If you want to do this deployment process automatically, consider CI/CD pipelines using tools like Cloud Build or GitHub Actions.

Setting Up of Supabase CLI and Local Environment

Yu Hamada — Sun, 02 Feb 2025 04:25:52 +0000

The Benefits and Strengths of Developing Locally with Supabase
Prerequisites
Step 1: Installing Supabase CLI
Step 2: Creating a New Supabase Project
Step 3: Starting the Local Environment
Step 4: Access to Supabase Studio
Step 5: Connect to Application
Other Supabase CLI Commands
- Stop Supabase
- Reset Supabase database
- Display Supabase Local Environment Variables
- Cannot Connect to the Docker Daemon Error

The benefits and strenghs of developing locally with Supabase

Supabase allows us to recreate a virtual environment on our local PC for each project.
We can push and apply the database schema, auth policies, and other configurations developed in our local environment to the remote production environment.
Supabase provides commands for setting up a local environment, allowing us to simply run these commands to create a virtual environment within Docker. These commands are Supabase CLI!

Prerequisites

Node.js and npm installed
Docker Installed(Supabase local environment relies on Docker)

Step 1: Installing Supabase CLI

Run the following command to install Supabase CLI globally

when using npm

npm install -g supabase

when using Homebrew(macOS)

brew install supabase/tap/supabase

verify the installation by running

supabase --version
> 2.2.1

Step 2: Creating a New Supabase Project

Create a new directory and navigate into it

mkdir my-supabase-project  
cd my-supabase-project
supabase login

Initialize a Supabase project

supabase init

Step 3: Starting the Local Environment

Ensure Docker is running
Start the Supabase local environment with

supabase start

Once started, the terminal will display the local environment URLs and connection details

supabase start

Started supabase local development setup.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: <JWT SECRET>
        anon key: <ANON_KEY>
service_role key: <SERVICE_ROLE_KEY>
   S3 Access Key: <S3 ACCESS_KEY>
   S3 Secret Key: <S3 SECERT KEY>
       S3 Region: local

When we start the local environment for the first time, it will take time as Docker images need to be downloaded.

Once the setup is complete, the following services will be available for use

PostgreSQL Database
Authentication Service (Auth)
Storage Service
Realtime Server

Step 4: Access to Supabase Studio

In local environment, we can access http://localhost:54323/project/default and see Supabase Studio.

Step 5: Connect to application

SUPABASE_URL=http://localhost:54321
SUPABASE_ANON_KEY=...
SUPABASE_SERVICE_ROLE_KEY=...

This completes the setup of the Supabase CLI and local Supabase environment!

Other Supabase CLI Commands

Stop Supabase

supabase stop

Reset Supabase database

supabase stop --no-backup

Display Supabase local environment variables

supabase status

Cannot connect to the Docker daemon error

If Docker is not running on your local machine, you'll see the following error when executing supabase start

supabase start

Cannot connect to the Docker daemon at unix:///Users/username/.docker/run/docker.sock. Is the docker daemon running?
  in github.com/supabase/cli/internal/utils.AssertDockerIsRunning:52
  in github.com/supabase/cli/internal/start.Run:38
Try rerunning the command with --debug to troubleshoot the error.

User Authentication with Auth.js in Next.js App Router

Yu Hamada — Sun, 10 Nov 2024 20:58:47 +0000

Initial Setup

Install
Configure
- NextAuthConfig settings
- Route Handler Setup
- Middleware
- Get Session in Server Component
- Get Session in Client Component
Folder structure

Implementing Authentication: Credentials and Google OAuth

Setting up prisma
Credentials
Add Google OAuth Provider
- Setting Google OAuth application
- Setting Redirect URI
- Setup Environment Variables
- Setup Provider
Creating Login and Signup page
Folder Structure

Initial Setup

Install

npm install next-auth@beta

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Configure

NextAuthConfig settings

// src/auth.ts
import NextAuth from "next-auth"

export const config = {
  providers: [],
}

export const { handlers, signIn, signOut, auth } = NextAuth(config)

It should be put inside of src folder

Providers means in Auth.js are services that can be used to sign in a user. There are four ways a user can be signed in.

Using a built-in OAuth Provider(e.g Github, Google, etc...)
Using a custom OAuth Provider
Using Email
Using Credentials

https://authjs.dev/reference/nextjs#providers

Route Handler Setup

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

This file is used for setting route handler with Next.js App Router.

Middleware

// src/middleware.ts
import { auth } from "@/auth"

export default auth((req) => {
　　// Add your logic here
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],　//  It's default setting
}

Write inside the src folder.
If written outside the src folder, middleware will not work.

Middleware is a function that allows you to run code before a request is completed. It is particularly useful for protecting routes and handling authentication across your application.

Matcher is a configuration option for specifying which routes middleware should apply to. It helps optimize performance by running middleware only on necessary routes.
Example matcher: ['/dashboard/:path*'] applies middleware only to dashboard routes.

https://authjs.dev/getting-started/session-management/protecting?framework=express#nextjs-middleware

Get Session in Server Component

// src/app/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function page() {
  const session = await auth()

  if (!session) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

Get Session in Client Component

// src/app/page.tsx
"use client"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"

export default async function page() {
  const { data: session } = useSession()
  const router = useRouter()

  if (!session.user) {
    router.push('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { SessionProvider } from "next-auth/react"

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="en">
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

Folder structure

/src
  /app
    /api
      /auth
        [...nextauth]
          /route.ts  // Route Handler
    layout.tsx
    page.tsx

  auth.ts  // Provider, Callback, Logic etc
  middleware.ts  // A function before request

Implementing Authentication: Credentials and Google OAuth

Setting up prisma

// prisma/schema.prisma

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String?
  accounts      Account[]
  sessions      Session[]
}

model Account {
  // ... (standard Auth.js Account model)
}

model Session {
  // ... (standard Auth.js Session model)
}

// ... (other necessary models)

// src/lib/prisma.ts

import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Credentials

Credentials, in the context of authentication, refer to a method of verifying a user's identity using information that the user provides, typically a username (or email) and password.

We can add credentials in src/auth.ts.

// src/auth.ts

import NextAuth from "next-auth";
import type { NextAuthConfig } from "next-auth";
import Credentials from "next-auth/providers/credentials"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/lib/prisma"
import bcrypt from 'bcryptjs';

export const config = {
  adapter: PrismaAdapter(prisma),
  providers: [
    Credentials({
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" }
      },
      authorize: async (credentials): Promise<any> => {
        if (!credentials?.email || !credentials?.password) {
          return null;
        }

        try {
          const user = await prisma.user.findUnique({
            where: {
              email: credentials.email as string
            }
          })

          if (!user || !user.hashedPassword) {
            return null
          }

          const isPasswordValid = await bcrypt.compare(
            credentials.password as string,
            user.hashedPassword
          )

          if (!isPasswordValid) {
            return null
          }

          return {
            id: user.id as string,
            email: user.email as string,
            name: user.name as string,
          }
        } catch (error) {
          console.error('Error during authentication:', error)
          return null 
        }
      }
    })
  ],
  secret: process.env.AUTH_SECRET,
  pages: {
    signIn: '/login',
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
        token.email = user.email
        token.name = user.name
      }
      return token
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.id as string
        session.user.email = token.email as string
        session.user.name = token.name as string
      }
      return session
    },
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

adapters:

modules that connect your authentication system to your database or data storage solution.

secret:

This is a random string used to hash tokens, sign/encrypt cookies, and generate cryptographic keys.
It's crucial for security and should be kept secret.
In this case, it's set using an environment variable AUTH_SECRET.

pages:

This object allows you to customize the URLs for authentication pages.
In your example, signIn: '/login' means the sign-in page will be at the '/login' route instead of the default '/api/auth/signin'.

session:

This configures how sessions are handled.
strategy: "jwt" means JSON Web Tokens will be used for session management instead of database sessions.

callbacks:

These are functions that are called at various points in the authentication flow, allowing you to customize the process.

jwt callback:

This runs when a JWT is created or updated.
In your code, it's adding user information (id, email, name) to the token.

session callback:

This runs whenever a session is checked.
Your code is adding the user information from the token to the session object.

Add Google OAuth Provider

Setting Google OAuth application

Create new OAuth Client ID from GCP Console > APIs & Services > Credentials

Once created, save your Client ID and Client Secret for later use.

Setting Redirect URI

When we work in local, set http://localhost:3000/api/auth/callback/google

In production environment, just replace http://localhost:3000 with https://------.

Setup Environment Variables

// .env.local
GOOGLE_CLIENT_ID={CLIENT_ID}
GOOGLE_CLIENT_SECRET={CLIENT_SECRET}

Setup Provider

// src/auth.ts

import GoogleProvider from "next-auth/providers/google"  // add this import.

export const { handlers, auth } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      // ... (previous Credentials configuration)
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // ... other configurations
})

https://authjs.dev/getting-started/authentication/oauth

Creating Login and Signup page

//// UI pages
// src/app/login/LoginPage.tsx
import Link from 'next/link'
import { LoginForm } from '@/components/auth/LoginForm'
import { Separator } from '@/components/auth/Separator'
import { AuthLayout } from '@/components/auth/AuthLayout'
import { GoogleAuthButton } from '@/components/auth/GoogleAuthButton'

export default function LoginPage() {
  return (
    <AuthLayout title="Welcome Back!">
      <LoginForm />
      <Separator />
      <GoogleAuthButton text="Sign In with Google" />
      <div className="mt-6 text-center">
        <p className="text-sm text-gray-400">
          Do not have an account?{' '}
          <Link href="/signup" className="pl-1.5 font-medium text-[#3ba55c] hover:text-[#2d7d46]">
            Sign up
          </Link>
        </p>
      </div>
    </AuthLayout>
  )
}


// src/app/signup/SignupPage.tsx
import Link from 'next/link'
import { SignUpForm } from '@/components/auth/SignUpForm'
import { Separator } from '@/components/auth/Separator'
import { AuthLayout } from '@/components/auth/AuthLayout'
import { GoogleAuthButton } from '@/components/auth/GoogleAuthButton'

export default function SignUpPage() {
  return (
    <AuthLayout title="Welcome!">
      <SignUpForm />
      <Separator />
      <GoogleAuthButton text="Sign Up with Google" />
      <div className="mt-6 text-center">
        <p className="text-sm text-gray-400">
          Already have an account?{' '}
          <Link href="/login" className="pl-1.5 font-medium text-[#3ba55c] hover:text-[#2d7d46]">
            Sign in
          </Link>
        </p>
      </div>
    </AuthLayout>
  )
}

//// Components
// src/components/auth/AuthLayout.tsx
import React from 'react'

interface AuthLayoutProps {
  children: React.ReactNode
  title: string
}

export const AuthLayout: React.FC<AuthLayoutProps> = ({ children, title }) => {
  return (
    <div className="min-h-screen bg-[#36393f] flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 className="mt-6 text-center text-3xl font-extrabold text-white">
          {title}
        </h2>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-[#2f3136] py-8 px-4 shadow sm:rounded-lg sm:px-10">
          {children}
        </div>
      </div>
    </div>
  )
}

// src/components/auth/GoogleAuthButton.tsx
import { signIn } from "@/auth"
import { Button } from "@/components/ui/button"

interface GoogleAuthButtonProps {
  text: string
}

export const GoogleAuthButton: React.FC<GoogleAuthButtonProps> = ({ text }) => {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("google", { redirectTo: '/' })
      }}
    >
      <Button
        className="my-1 w-full bg-white text-gray-700 hover:bg-slate-100"
      >
        <svg className="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          <path d="M1 1h22v22H1z" fill="none"/>
        </svg>
        {text}
      </Button>
    </form>
  )
}

// src/components/auth/LoginForm.tsx
'use client'

import { useTransition } from "react"
import { useForm } from "react-hook-form"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { LoginResolver, LoginSchema } from "@/schema/login"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { FormError } from "@/components/auth/FormError"
import { FormSuccess } from "@/components/auth/FormSuccess"
import { login } from "@/app/actions/auth/login"
import { Loader2 } from "lucide-react"

export const LoginForm = () => {
  const [error, setError] = useState<string | undefined>('')
  const [success, setSuccess] = useState<string | undefined>('')
  const [isPending, startTransition] = useTransition()
  const router = useRouter();

  const form = useForm<LoginSchema>({
    defaultValues: { email: '', password: ''},
    resolver: LoginResolver,
  })

  const onSubmit = (formData: LoginSchema) => { 
    startTransition(() => {
      setError('')
      setSuccess('')
      login(formData)
        .then((data) => {
          if (data.success) {
            setSuccess(data.success)
            router.push('/setup')
          } else if (data.error) {
            setError(data.error)
          }
        })
        .catch((data) => {
          setError(data.error)
        })
    })
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div className="space-y-3">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="text-white">Email address</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your email address" 
                    {...field} 
                    disabled={isPending}
                    className="bg-[#40444b] text-white border-gray-600 focus:border-2 focus:border-[#2d7d46]"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="text-white">Password</FormLabel>
                <FormControl>
                  <Input 
                    type="password"
                    placeholder="Enter your password" 
                    {...field} 
                    disabled={isPending}
                    className="bg-[#40444b] text-white border-gray-600 focus:border-2 focus:border-[#2d7d46]"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormError message={error} />
          <FormSuccess message={success} />
        </div>
        <Button
          type="submit"
          disabled={isPending}
          className="mt-8 w-full bg-[#3ba55c] hover:bg-[#2d7d46] text-white"
        >
          {isPending ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Loading...
            </>
          ) : (
            'Login'
          )}
        </Button>
      </form>
    </Form>
  )
}


// src/components/auth/SignUpForm.tsx
'use client'

import { useTransition } from "react"
import { useForm } from "react-hook-form"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { SignUpResolver, SignUpSchema } from "@/schema/signup"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { FormError } from "@/components/auth/FormError"
import { FormSuccess } from "@/components/auth/FormSuccess"
import { signUp } from "@/app/actions/auth/signup"
import { Loader2 } from "lucide-react"

export const SignUpForm = () => {
  const [error, setError] = useState<string | undefined>('')
  const [success, setSuccess] = useState<string | undefined>('')
  const [isPending, startTransition] = useTransition()
  const router = useRouter();

  const form = useForm<SignUpSchema>({
    defaultValues: { name: '', email: '', password: ''},
    resolver: SignUpResolver,
  })

  const onSubmit = async (formData: SignUpSchema) => { 
    startTransition(() => {
      setError('')
      setSuccess('')
      signUp(formData)
        .then((data) => {
          if (data.success) {
            setSuccess(data.success)
            router.push('/login')
          } else if (data.error) {
            setError(data.error)
          }
        })
        .catch((data) => {
          setError(data.error)
        })
    })
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div className="space-y-3">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="text-white">Username</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your name" 
                    {...field} 
                    disabled={isPending}
                    className="bg-[#40444b] text-white border-gray-600 focus:border-2 focus:border-[#2d7d46]"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="text-white">Email address</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your email address" 
                    {...field} 
                    disabled={isPending}
                    className="bg-[#40444b] text-white border-gray-600 focus:border-2 focus:border-[#2d7d46]"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="text-white">Password</FormLabel>
                <FormControl>
                  <Input 
                    type="password"
                    placeholder="Enter your password" 
                    {...field} 
                    disabled={isPending}
                    className="bg-[#40444b] text-white border-gray-600 focus:border-2 focus:border-[#2d7d46]"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormError message={error} />
          <FormSuccess message={success} />
        </div>
        <Button
          type="submit"
          disabled={isPending}
          className="mt-8 w-full bg-[#3ba55c] hover:bg-[#2d7d46] text-white"
        >
          {isPending ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Loading...
            </>
          ) : (
            'Sign Up'
          )}
        </Button>
      </form>
    </Form>
  )
}


// src/components/auth/FormSuccess.tsx
import { CheckCircledIcon } from "@radix-ui/react-icons";

interface FormSuccessProps {
  message?: string;
}

export const FormSuccess = ({ message }: FormSuccessProps) => {
  if (!message) return null;

  return (
    <div className="bg-emerald-500/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-emerald-500">
      <CheckCircledIcon className="h-4 w-4" />
      <p>{message}</p>
    </div>
  );
};


// src/components/auth/FormError.tsx
import { ExclamationTriangleIcon } from "@radix-ui/react-icons";

interface FormErrorProps {
  message?: string;
}

export const FormError = ({ message }: FormErrorProps) => {
  if (!message) return null;

  return (
    <div className="bg-destructive/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-destructive">
      <ExclamationTriangleIcon className="h-4 w-4" />
      <p>{message}</p>
    </div>
  );
};


// src/components/auth/Separator.tsx
export const Separator = () => {
  return (
    <div className="my-4 relative">
      <div className="absolute inset-0 flex items-center">
        <div className="w-full border-t border-gray-600" />
      </div>
      <div className="relative flex justify-center text-sm">
        <span className="px-2 bg-[#2f3136] text-gray-400">Or continue with</span>
      </div>
    </div>
  )
}

//// Actions
// src/app/actions/auth/login.ts
'use server'

import { LoginSchema, loginSchema } from '@/schema/login'
import { signIn } from '@/auth'


export const login = async (formData: LoginSchema) => {
  const email = formData['email'] as string
  const password = formData['password'] as string

  const validatedFields = loginSchema.safeParse({
    email: formData.email as string,
    password: formData.password as string,
  })

  if (!validatedFields.success) {
    return { 
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Login failed. Please check your input.'
    }
  }

  try {
    const result = await signIn('credentials', {
      redirect: false,
      callbackUrl: '/setup',
      email,
      password
    })

    if (result?.error) {
      return { error : 'Invalid email or password'}
    } else {
      return { success : 'Login successfully'}
    }
  } catch {
    return { error : 'Login failed'}
  }
}

// src/app/actions/auth/signup.ts
'use server'

import bcrypt from 'bcryptjs'
import { SignUpSchema, signUpSchema } from "@/schema/signup"
import { prisma } from '@/lib/prisma';

export const signUp = async (formData: SignUpSchema) => {
  const validatedFields = signUpSchema.safeParse({
    name: formData.name as string,
    email: formData.email as string,
    password: formData.password as string,
  })

  if (!validatedFields.success) {
    return { 
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Sign up failed. Please check your input.'
    }
  }

  try {
    const hashedPassword = await bcrypt.hash(validatedFields.data.password, 10);
    const existingUser = await prisma.user.findUnique({
      where: { email: validatedFields.data.email }
    })

    if (existingUser) {
      return { error: 'User already exists!' }
    }

    await prisma.user.create({
      data: {
        name:  validatedFields.data.name,
        email:  validatedFields.data.email,
        hashedPassword: hashedPassword,
      },

    });

    return { success: 'User created successfully!' }
  } catch (error) {
    return { error : `Sign up failed`}
  }
}

//// Validations
// src/schema/login.ts
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod'; 

export const loginSchema = z.object({
  email: z.string().email('This is not valid email address'),
  password: z
    .string()
    .min(8, { message: 'Password must contain at least 8 characters' }),
});

export type LoginSchema = z.infer<typeof loginSchema>;
export const LoginResolver = zodResolver(loginSchema);

// src/schema/signup.ts
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod'; 

export const signUpSchema = z.object({
  name: z.string().min(1, {
    message: 'Name is required'
  }),
  email: z.string().email('This is not valid email address'),
  password: z
    .string()
    .min(8, { message: 'Password must contain at least 8 characters' }),
});

export type SignUpSchema = z.infer<typeof signUpSchema>;
export const SignUpResolver = zodResolver(signUpSchema);

// src/middleware.ts
import { NextResponse } from 'next/server'
import { auth } from "@/auth"

export default auth((req) => {
  const { nextUrl, auth: session } = req
  const isLoggedIn = !!session
  const isLoginPage = nextUrl.pathname === "/login"
  const isSignUpPage = nextUrl.pathname === "/signup"
  const isSetupPage = nextUrl.pathname === "/setup"

  // If trying to access /setup while not logged in
  if (!isLoggedIn && isSetupPage) {
    const loginUrl = new URL("/login", nextUrl.origin)
    return NextResponse.redirect(loginUrl)
  }

  // If trying to access /login or /signup while already logged in
  if (isLoggedIn && (isLoginPage || isSignUpPage)) {
    const dashboardUrl = new URL("/", nextUrl.origin)
    return NextResponse.redirect(dashboardUrl)
  }

  // For all other cases, allow the request to pass through
  return NextResponse.next()
})

export const config = {
  matcher: ["/login","/signup", "/setup", "/"],
};

Folder Structure

/src
  /app
    /actions
      /login.ts  // Login Action
      /signup.ts  // Signup Action
    /api
      /auth
        [...nextauth]
          /route.ts
    /login
      page.tsx  // Login Page
    /signup
      page.tsx  // Sign Up Page
    layout.tsx
    page.tsx

  /components
    /auth
      AuthLayout.tsx
      GoogleAuthButton.tsx
      LoginForm.tsx
      SignupForm.tsx
      FormSuccess.tsx
      FormError.tsx
      Separator.tsx

  /schema
    login.ts
    signup.ts

  auth.ts  // in src folder
  middleware.ts  // in src folder

Understanding Modern Web Authentication Flows: Session vs JWT vs OAuth

Yu Hamada — Tue, 29 Oct 2024 19:03:11 +0000

Introduction
Session-Based Authentication Flow
JWT Authentication Flow
OAuth 2.0 Authentication Flow
Conclusion

Introduction

Authentication is the process of confirming the identity of a user to access services within application.
This article explores three popular authentication methods: Session-based Authentication, JSON Web Tokens (JWT), and OAuth 2.0.

Session-Based Authentication Flow

Session authentication is a method of identifying users in subsequent requests after they have logged in once. Typically, session authentication involves the following steps:

User logs in: Browser sends login credentials (ID/password) to the server.
Server validation & session creation: Server verifies credentials and creates a session, storing it both server-side and in a browser cookie.
Server response: Server sends confirmation of successful session establishment to browser.
Authenticated requests: Browser includes session information in subsequent requests to access protected resources.
Session verification: Server validates the session information and authorizes access.
Protected response: Server responds with requested resources after successful authorization.
Logout initiation: User initiates logout, browser sends logout request to server.
Session termination: Server invalidates session by removing it from storage and clearing the cookie.
Logout completion: Server confirms successful logout to browser.

Browser                   Server
  |                         |
  |--- 1. Login ------>     |
  |   (ID and Password)     |
  |                         | 2. Establish Session (Stored on server and Cookie)
  |                         |
  |<-- 3. Response -----    |
  |                         |
  |                         |
  |--- 4. Request ------>   |
  |  (Includes Session Info)| 5. Authorization Successful
  |                         |
  |<-- 6. Response -----    |
  |   (User Identified)     |
  |                         |
  |--- 7. Logout ------>    |
  |                         | 8. Delete Session
  |<-- 9. Response ---      |
  |   (Session Info Cleared)|
  |                         |

JWT Authentication Flow

JWT (JSON Web Token) authentication is a method of keeping users logged in by using a special token. When a user logs in, the server creates a signed token containing user information. The browser then includes this token with every request, allowing the server to verify who the user is without needing to store session data. Typically, JWT authentication involves the following steps:

User logs in: Browser sends login credentials (ID/password) to the server.
Server validation & token creation: Server verifies credentials and creates a JWT token containing user information, signed with a secret key.
Server response: Server returns the JWT token to the browser. The token can be stored in:
- localStorage: Easily accessible but vulnerable to XSS attacks
- sessionStorage: Similar to localStorage but cleared when browser closes
- Memory: Safest option but lost on page refresh
- httpOnly Cookie: Secure against XSS but vulnerable to CSRF
Authenticated requests: Browser includes JWT token in the Authorization header for subsequent requests to access protected resources.
Token verification: Server validates the JWT signature and checks if the token is not expired.
Protected response: Server responds with requested resources after successful token verification.
Token expiration handling: If token expires, server returns 401 error, and browser needs to request a new token.
Token refresh: Browser sends refresh token to get a new JWT token (if refresh mechanism is implemented).
Token renewal: Server validates refresh token and issues a new JWT token.

Browser                    Server
  |                         |
  |--- 1. Login ------>     |
  |   (ID and Password)     |
  |                         | 2. Create JWT Token (Signed with Secret Key)
  |                         |
  |<-- 3. Response -----    |
  |   (Return JWT Token)    |
  |                         |
  |--- 4. Request ------>   |
  |   (JWT in Header)       | 5. Verify JWT Signature
  |                         |
  |<-- 6. Response -----    |
  |   (Protected Data)      |
  |                         |
  |--- 7. Request ------>   |
  |   (Expired JWT)         | Token Expired
  |                         |
  |<-- Error 401 ----       |
  |                         |
  |--- 8. Get New JWT -->   |
  |   (Refresh Token)       | 9. Verify & Generate New JWT
  |                         |
  |<-- Response ----        |
  |   (New JWT Token)       |
  |                         |

OAuth 2.0 Authentication Flow

OAuth authentication is a way to let users log in to your app using their accounts from other services (like Google or Facebook). Instead of creating new usernames and passwords, users can use accounts they already have. When a user chooses "Login with Google," they are sent to Google's login page, and after approval, Google tells your app that the user is verified. Typically, OAuth authentication involves the following steps:

User initiates login: User clicks "Login with Provider" (Google, Facebook, etc.) in the browser.
Authorization request: App redirects user to provider's login page with:
- client_id: App's unique identifier
- redirect_uri: Where to return after login
- scope: Requested permissions
- state: Security token to prevent CSRF
User authentication: User logs in at provider's site and approves requested permissions.
Code return: Provider redirects back to app with:
- authorization code: Temporary code
- state: Same security token to verify
Token exchange: App server sends to provider:
- authorization code
- client_id and client_secret
- redirect_uri
Access token response: Provider returns:
- access token: For API access
- refresh token: For getting new access tokens
- expiration time: Token validity period
- id_token (optional): User information
Resource access: App can now:
- Use access token to get user data from provider
- Create local user session
- Store refresh token securely (in database)
Token expiration handling: When access token expires:
- App uses refresh token to request new access token
- Provider validates refresh token
- Provider issues new access token
Logout process: User logout includes:
- Clear local session
- Revoke tokens at provider (optional)
- Redirect to provider's logout endpoint (optional)

Browser                    App Server               OAuth Provider
  |                            |                          |
  |-- 1. Click Login -->       |                          |
  |   (Login with Provider)    |                          |
  |                            |                          |
  |<- 2. Redirect ---------    |                          |
  |   (client_id,              |                          |
  |    redirect_uri,           |                          |
  |    scope,                  |                          |
  |    state)                  |                          |
  |                            |                          |
  |--------------------------------> 3. Login & Approve   |
  |                            |    (User authenticates   |
  |                            |     & approves scope)    |
  |                            |                          |
  |<-------------------------------- 4. Redirect          |
  |                            |    (authorization code,  |
  |                            |     state)               |
  |                            |                          |
  |-- 5. Send Code ------>     |                          |
  |                            |-- 5. Token Exchange -->  |
  |                            |   (authorization code,   |
  |                            |    client_id,            |
  |                            |    client_secret,        |
  |                            |    redirect_uri)         |
  |                            |                          |
  |                            |<- 6. Tokens ----------   |
  |                            |   (access token,         |
  |                            |    refresh token,        |
  |                            |    expiration time,      |
  |                            |    id_token)             |
  |                            |                          |
  |<- 7. Create Session --     |                          |
  |   (Store tokens &          |                          |
  |    create user session)    |                          |
  |                            |                          |
  |-- 8. Request with ----     |                          |
  |   Expired Token            |                          |
  |                            |-- 8. Refresh Token -->   |
  |                            |   (refresh token)        |
  |                            |                          |
  |                            |<- 8. New Token ------    |
  |                            |   (new access token)     |
  |                            |                          |
  |-- 9. Logout --------->     |                          |
  |                            |-- 9. Revoke Tokens -->   |
  |                            |   (optional)             |
  |<- 9. Clear Session ---     |                          |
  |   (& optional redirect     |                          |
  |    to provider logout)     |                          |

Conclusion

Choose your authentication method based on your needs:

Session Authentication

Best for: Traditional websites
Easy to use
Works on single server

JWT Authentication

Best for: Modern web apps and APIs
No server storage needed
Works across multiple servers

OAuth Authentication

Best for: "Login with Google/Facebook" features
Users can use existing accounts
Good for social login

Understanding prisma codes for beginners in 100 seconds

Yu Hamada — Sat, 29 Jun 2024 18:31:01 +0000

What is prisma?
The benefit of using prisma
Prisma commands
Conclusion

What is prisma?

Prisma is a tool that helps developers work with databases.
For database beginners, writing SQL to create database is much challenging. Prisma helps to solve this problem.
It supports a variety of databases, including SQL and NoSQL, and can query and retrieve databases via and API.

The benefit of using prisma

Low learning cost

Prisma allows us to manipulate the database with method-based commands without needing deep SQL knowledge.

Unified data model management

We can easily define and manage our data structure with a schema file which describes database tables, columns, and relationships, providing a clear way to handle our data models.

Supports Multiple Databases

We can use our preferred database, including PostgreSQL, MySQL,　MongoDB and more. This means we can start with one database and switch to another without significant code changes, giving us the flexibility to choose the best database for our needs as our project evolves.

GUI Tool Included

Visualize and edit our data in database using Prisma Studio.

Prisma commands and workflow

1. Install prisma

To install prisma, we can choose how we install it. There are two following options.

1-1. Install prisma

npm install prisma

This command installs prisma as a regular dependency in our project.

1-2. Install prisma development dependencies

npm install -D prisma  // or npm install prisma —save-dev

This command installs prisma as a development dependency in our project. Use this if we only need prisma during development.

2. Initialize prisma in our project

npx prisma init

This command sets up prisma in our project by creating a prisma directory with a schema.prisma file and a .env file for environment variables.

3. Define our schema

Edit the schema.prisma file to define our data models like this.

// This is Prisma schema file (schema.prisma)
// It defines our data model and the database configuration.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql" // Use "mysql", "mongodb", or other supported providers as needed
  url      = env("DATABASE_URL") // Environment variable storing our database connection URL
}

// Define the User model
model User {
  id        Int      @id @default(autoincrement()) // Primary key, auto-incrementing
  name      String
  email     String   @unique // Unique constraint
  posts     Post[]   // One-to-many relationship with Post model
}

// Define the Post model
model Post {
  id        Int      @id @default(autoincrement()) // Primary key, auto-incrementing
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id]) // Foreign key relationship
}

4. Generate prisma client

npx prisma generate

This command generates the Prisma Client based on our schema.prisma file. Prisma Client makes it easy and safe to perform database operations in JavaScript or TypeScript code.　We need to run this command whenever we make changes to your schema.

5. Create and Apply Migrations

npx prisma migrate dev --name <migration-name>

This command creates a new migration file based on the changes in our schema and applies it to our database. Replace with a descriptive name for the migration.

6. Use Prisma Client in our code

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  const user = await prisma.user.create({
    data: { name: 'Alice', email: 'alice@example.com' },
  });
  console.log(user);
}

main()
  .catch((e) => console.error(e))
  .finally(async () => {
    await prisma.$disconnect();
  });

7. Open Prisma Studio

npx prisma studio

This command opens Prisma Studio, a web-based GUI to interact with our database. We can view, edit, and manage our data visually

Conclusion

For those who are new to JavaScript or just starting full-stack application development, learning SQL and designing a database from scratch can be a hard working. Prisma solves this problem for us.　By using Prisma, we can focus on developing our applications.

Understanding immutability for beginners in React

Yu Hamada — Sun, 19 May 2024 07:40:38 +0000

At the beginning
What is immutability?
Why important?
The example of immutable operations
- Spread Syntax
- Destructuring assignment
- Array prototype method
Conclusion

At the beginning

While I'm studying React, I frequently came across the word "immutability" but didn't look into it deeply because it sounded hard to know. However, I want to gain a thorough understanding of it by writing this article.

What is immutability?

Immutability in React means that we should not modify the existing state or props directly. Instead, we should create a new copy of the state or props with the desired changes.

Why do we need immutability?

React detects changes in components by checking the difference of objects. This is done for performance reasons and to make re-rendering more predictable.

If you perform mutable operations, the original information is also changed. This means React cannot detect the difference between the state before and after the change.

On the other hand, in case of immutable operations, React can detect the difference because the state before and after the change is referenced separately. Additionally, since the original state is not changed, it can be kept as a history, allowing for features like undoing changes up to a certain point.

Performing immutable operations ensures that React can accurately detect changes and provides benefits like maintaining a history of state changes, which allows for more predictable rendering and additional functionality.

The example of immutable operations

Spread Syntax

// update array
const newArray = [...oldArray, newItem];

// update object 
const newObj = {...oldObj, newProp: 'value'}

Destructuring assignment

const obj = { a: 1, b: 2 };
const newObj = { ...obj, b: 3 };

Array prototype method

const newArray = oldArray.map(item => item * 2);
const filtered = oldArray.filter(item => item > 0);
const combined = [...oldArray1, ...oldArray2];

Conclusion

Immutability in React provides performance benefits, prevents bugs from unexpected mutations, and makes code easier to reason about. It's a core principle React developers should follow.

The difference of writing CSR, SSR and SSG in Next.js App Router and Page Router.

Yu Hamada — Sun, 12 May 2024 04:57:58 +0000

At the beginning
What is CSR, SSR, SSG?
Conclusion

At the beginning

When I first studied CSR, SSR and SSG, I struggled to understand these concepts. Recently, the introduction of App Router, which include different writing styles, has made it even more challenging. Additionally, there are still many articles that mix up these concepts.
I wrote this article to clearly the difference between them.

Client-Side Rendering（CSR）

Rendering HTML on the client side.
Receive empty HTML, CSS, JavaScript from the server side, and then create HTML using initial data.
The page is slow because of data acquisition and creating HTML on the client side each time.
Use only pages where you want to update data on the client side depending on user operation, etc.

In Next.js, there are two ways we can implement client-side rendering.

Using React hooks like useEffect(), useState().
Using a data fetching library SWR.

Here is an example.

'use client'

import React, { useEffect, useState } from "react";

const CsrPage = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const fetchData = async () => {
    const res = await fetch("https://dummyjson.com/products");
    const data = await res.json();

    setProducts(data.products);
  };

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

  return (
    <>
      <h3>Built with CSR</h3>
      <br />
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default CsrPage;

In page router, we don't need to use use client on the top of file　 because there is no concept of client component and server component.

The process flow of CSR

Server-Side Rendering（SSR）

Rendering HTML on the server side, not on the client side.
Create HTML on the server side and return to the client after the server receives the request and retrieves the necessary data.
The page is fast because the server generates only the necessary pages, and the browser just displays them.
Use SSR only on pages where SSG can't(the website with content that changes for each user).

In SSR, we use { cache: "no-store" } in the second argument of fetch(). And don't use useEffect(), useState().

Here is an example.

import React from "react";

const SsrPage = () => {
  const res = await fetch("https://dummyjson.com/products", {
    cache: "no-store",
  });
  const data = await res.json();

  return (
    <>
      <h3>Built with SSR</h3>
      <br />
      <ul>
        {data.products.map((product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default SsrPage;

In page router, we need to export an async function called getServerSideProps. But In App Router, don't use getServerSideProps.

The process flow of SSR

Static Site Generation（SSG）

Complete the HTML construction of the entire site, including data fetching with the API, on the server side in advance of the build process.
Just return this file when requested.
The page is fast by having the page cached in the CDN.
SEO-friendly

In SSG, we use { cache: "force-cache" } in the second argument of fetch() （Default value { cache: 'force-cache' }, so it can be omitted）. And don't use useEffect(), useState().

Here is an example.

import React from "react";

const SsgPage = () => {
  const res = await fetch("https://dummyjson.com/products", {
    cache: "force-cache",  // we can be omitted
  });
  const data = await res.json();

  return (
    <>
      <h3>Built with SSG</h3>
      <br />
      <ul>
        {data.products.map((product) => (
          <li key={product.id}>
            {product.id}: {product.title}
          </li>
        ))}
      </ul>
    </>
  );
};

export default SsgPage;

In page router, we need to export an async function called getStaticProps. But In App Router, don't use getStaticProps.

The process flow of SSG

Conclusion

This article can be covered CSR, SSR and SSG that beginners should understand at first. In addition to them, there is also ISR to render the web page. I hope this article will serve as a first step for those new to Next.js.

Understanding clearly page transition using libraries in React and Next.js

Yu Hamada — Sun, 05 May 2024 04:59:55 +0000

At the Beginning
React
- useNavigate
- Link
- redirect
Next.js
- useRouter
- Link
- redirect
Conclusion

At the beginning

When studying Next.js and React, I often found myself overwhelmed by the variety of options available for handling page transitions and frustrated by the mix of old and new information. This confusion led me to write this article, aiming to clarify which methods are best to use and when.

React

useNavigate

useNavigate is one of the hooks of React Router. React Router is an essential tool for managing navigation within React applications.
When you want to use React Router, you can install it like this.

npm install react-router-dom

useNavigate simplifies the navigation code by providing a single function. And also it is used in event handlers and asynchronous processing.
Here is an example.

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    // JSX content
  );
};

useHistory is previous hooks of React Router. Don't use it now. Since React Router v6 is released, useNavigate is the best way to navigate in applications instead of useHistory.

Link

The Link component which is one of the React Router hooks is used to create navigation links in our applications. It's a similar role to the a tag in HTML.　When you click an a tag, the webpage refreshes, but using the Link component does not cause a refresh.
Here is an example.

import { Link } from 'react-router-dom'

<Link to="/">Home</Link>
<Link to="/about">About</Link>

redirect

The redirect hook is used in React Router to redirect the user to different router programmatically. When the component is rendered, it will automatically redirect the user to the specified route.　
The main difference compared with useNavigate is that redirect component automatically redirects depending on conditions, while useNavigate programmatically controls navigation based on the logic in the component.
Here is an example.

import { redirect } from 'react-router-dom'

const MyComponent = async () => {
  const currentUser = await getUser()
  if (!user) {
    return redirect("/login")
  }
}

Next.js

useRouter

The useRouter （next/navigation） hook allows you to programmatically change routes in App Router. It can be used only in client component.

'use client'
import useRouter from 'next/navigation'

const MyComponent = () => {
  const router = useRouter()
  const handleClick = () => {
    router.push('/')
  }
  return(
    <>
      <div>hoge</div>
      <div onClick={handleClick}>Home</div>
    </>
  )
}

The useRouter （next/router） hook can be worked in Pages Router. Please be careful where useRouter is imported from.

Link

A React component called Link is provided to do this in client component. It is the primary and recommended way to navigate between routes in Next.js. We can use it by importing it from next/link, and passing a href prop to the component in Next.js.
Here is an example.

import Link from 'next/link'

const MyComponent () => {
  return (
    <ul>
      <li><Link href="/">Home</Link></li>
      <li><Link href="/about">About Us</Link></li>
    </ul>
  )
}

redirect

When we want to navigation routes in server component, use the redirect function instead.
The redirect function allows you to redirect the user to another URL.

import { redirect } from 'next/navigation'
import { getUser } from '../action/getUser'

const MyComponent () => {
  const user = await getUser()
  if (!user) {
    redirect("/login")
  }
  return (
    // JSX component
  )
}

Conclusion

Writing this article helped me organize my thoughts. I hope it allows you to approach their future coding projects with a clearer understanding of the information.

HTTP response status codes which Beginners should know at first.

Yu Hamada — Sat, 27 Apr 2024 18:19:34 +0000

At the beginning
What is HTTP response status codes?
Which HTTP response status codes do beginners should know at first?
- 200 OK
- 201 Created
- 400 Bad Request
- 401 Unauthorized
- 403 Forbidden
- 404 Not Found
- 500 Internal Server Error
Conclusion

At the beginning

When I first started learning web development, I was overwhelmed by lots of HTTP status codes - it seemed impossible for to memorize them all. However, as I continued developing more applications, I realized that there are only a couple of status codes that beginners really need to know at first.
This article would be the first step in learning this for beginners.

What is HTTP response status codes?

HTTP response status codes are 3-digit numbers that are part of the HTTP protocol which refers to the rules and conventions for exchanging information on the web.
They are returned by web servers to indicate the status of a client's request. The status codes are grouped into the following 5 categories.

1xx Informational
2xx Success
3xx Redirection
4xx Client Error
5xx Server Error

1xx　Informational

This indicates that the request was received and is being processed（100 Continue, 102 Processing）.

2xx　Success

This indicates that the request was received, understood, and accepted successfully(200 OK, 201 Created, 204 No Content).

3xx　Redirection

This indicates that further action needs to be taken by the client in order to complete the request(301 Moved Permanently, 302 Found, 304 Not Modified).

4xx　Client Error

This indicates that there was a problem with the request from the client.(400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found).

5xx　Server Error

This indicates that there was a problem on the server side in fulfilling the request(500 Internal Server Error, 501 Not Implemented, 503 Service Unavailable).

Which HTTP response status codes do beginners should know at first?

200 OK

This indicates that the request was successful. It's the most common success status code.

// When you can sign-in successfully
return res.status(200).json({ message: "Sign In out successfully" });

// When you can logout successfully
return res.status(200).json({ message: "Logout successfully" });

// When a client sends a GET request to retrieve a list of users
app.get('/users', (req, res) => {
  const users = [/* fetch users from database */];
  res.status(200).json(users);
});

201 Created

This is returned whenever a new resource is created on the server, for example, after a successful POST request to create a new record.

// When a client sends a POST request to create a new user
app.post('/users', (req, res) => {
  const newUser = req.body;
  // save newUser to database
  res.status(201).json(newUser);
});

400 Bad Request

This indicates that the request wasn't formed correctly or invalid. It's a client-side error.

const { name, email } = req.body;

// Check if required fields are present
if (!name || !email) {
  return res.status(400).json({ error: 'Name and email are required' });
}

401 Unauthorized

This indicates that the client has not been authenticated or has provided invalid credentials.

// When you fail the process of user authentication
return res.status(401).send({ message: "Authentication failed" });

// When the JWT token is missing from the request　and respond
const token = req.cookies.token;
if (!token) return res.status(401).json({ message: "Not Authenticated!" });

403 Forbidden

This indicates that the client has provided valid authentication credentials, but it does not have permission or authorization to access the requested resource.

// When a non-admin user attempts to access some actions
if (user.isAdmin !== 'admin') {
  return res.status(403).json({ error: 'Forbidden: Insufficient permissions' });
}

404 Not Found

This indicates that the requested resource does not exist on the server. It's still considered a client-side error, even though it may seem like it's related to the server. The reason for this is that when the client sends a request for a resource, it's the client's responsibility to request a valid resource that exists on the server.

// When user can't be found
const user = getUserById(userId);
if (!user) {
  return res.status(404).json({ error: "User not found" });
}

// When comment can't be found
const comment = getCommentById(commentId);
if (!comment) {
  return res.status(404).json({ error: "Comment not found" });

500 Internal Server Error

This is a generic server-side error code, indicating that something went wrong on the server, but the issue is unknown.

return res.status(500).json({ error: "Internal server error" });

Conclusion

It's really important for us to understand which HTTP status codes should be used when we create web applications.
Other articles are informative, so I summarize them in this article.
If you are interested in learning them, you can search more deeply.

What React beginners should know about React 19 first.

Yu Hamada — Sun, 21 Apr 2024 00:19:12 +0000

At the beginning
What's new in React 19?
- React Compiler
- Actions
- New Hooks（useFormStatus, useFormState, useOptimistic, useTransition）
- Server Components
Conclusion

At the beginning

The last time React released a version was on June 14, 2022, with the version number being 18.2.0.
Now, let's take an early look at the new features that might be officially released in version 19, based on the latest news from the React team.

What's new in React 19?

React Compiler

React can re-render more than necessary when state changes. Currently, this solution for these situation is used by manual memoization by using useMemo, useCallback. However, react compiler solve this issue. It will manage these re-renders and decide automatically how and when to change the state and update the UI. That's why such manual memoization will no longer be necessary in React 19.

Actions

<form action={search}>
  <input name='query' />
  <button type='submit'>Search</button>
</form>

Traditionally, Server Actions which are solutions for sending data from the client to the server were only available for server-side rendering in Next.js.
However, with Actions in React 19, a portion of that functionality is being extended to also work on the client-side. This means that Actions are become used in client-side code for single-page applications (SPA).

As per React’s official website, Action allows us to pass a function to DOM elements. Further, Actions work both synchronously and asynchronously. We can access the current status and response of form operations through the useFormStatus and useFormState hooks. In short, we'll be able to replace the onSubmit event with actions.
In addition to combining with useFormStatus and useFormState, actions can also be used with useOptimistic for managing optimistic state updates.

New Hooks

As I told you earlier, React 19 introduces new form-related hooks useFormStatus, useFormState and useOptimistic and useTransition. These new hooks provide functionalities related to managing form status, form state, optimistic state updates, and transitions in React applications.

useFormStatus

useFormStatus helps us have more control over the forms you create. It is useful when we want to know status information about the form submission（pending or not） and accordingly display the data.

useFormState

useFormState allows us to update state based on the result of the form submission.

useOptimistic

useOptimistic allows us to optimistically update the UI during asynchronous operations. It accepts the current state and an update function as parameters, return a copy of the state that may differ during the asynchronous operation.

useTransition

useTransition lets us update the state without blocking the UI. The useTransition hook is already available in React 18.2. What's new in React 19 is that you can now pass an async function to startTransition, which is awaited by React to start the transition.

Server Components

Until now, React components have primarily run on the client side. However, in React 19, server components which is already implemented in Next.js will be integrated directly into React. All the components in React by default are client side. Only when you use use server on the top of file becomes the component be a server component which runs on the server.

Conclusion

New React 19 features make us to build websites and web applications a lot easier and better. When is React 19 available? I'm not sure. But as of now, we can use it for our own learning, or having fun only. Avoid using them for customer facing apps at the moment. After React 19 released officially, it's better to use their features for creating websites and web application better and faster for sure.

What is ”this” in JavaScript？

Yu Hamada — Thu, 18 Apr 2024 06:53:16 +0000

What is this?
- this in a Method
- this When Used Alone
- this in Functions
- this in Event Handlers
- Controlling this with call() and apply()
- this in Arrow Functions
Conclusion

What is "this"?

In JavaScript, this is a keyword that refers to the object it belongs to. It has different objects depending on where it's used.

this in a Method.

Example: If you have an object person with a method getName, this inside getName refers to person.
In a method, this refers to the owner object.

const person = {
  name: 'Alice',
  getName: function() {
    return this.name;  // 'this' refers to 'person'
  }
};

this When Used Alone

In a browser, it's window in Node.js, it's global. However, in strict mode ('use strict'), this will be undefined if it's not part of an object.
this refers to the global object.

console.log(this);  // Logs 'window' in a browser

this in Functions

This is similar to when this is used alone, but in strict mode, this will be undefined.
In a function, this refers to the global object.

function show() {
  console.log(this);  // 'this' is 'window' in non-strict mode
}

this in Event Handlers

Example: If a button in the HTML receives a click event, this inside the event handler refers to that button.
In an event, this refers to the element that received the event.

button.addEventListener('click', function() {
  console.log(this);  // 'this' refers to 'button'
});

Controlling this with call() and apply()

These methods call a function with a specified this value and arguments, allowing you to control the execution context.
With call() and apply(), you can specify the value of this.

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = {name: 'Alice'};
greet.call(person);  // 'this' in greet() is set to 'person'

this in Arrow Functions

Arrow functions do not have their own this context; instead, this is the same as in the enclosing lexical context.
In arrow functions, this is lexically inherited from the enclosing scope.

const person = {
  name: 'Alice',
  greet: () => {
    console.log(this.name);  // 'this' is the same as it was outside the arrow function
  }
};

Conclusion

The behavior of this can be confusing due to its different values in different contexts, making it important to understand where and how this is being used in your code.

Understanding Cache vs Cookie vs Session in 100 seconds.

Yu Hamada — Sat, 13 Apr 2024 21:54:50 +0000

At the beginning
What is Cache vs Cookie vs Session?
How do they work?
Conclusion

At the beginning

Have you tried to figure out the difference between Cache vs Cookies vs Session? The operations of these three objects are quite similar. However, what precisely are they, what issues are they addressing, and how are they unique? In this article, It makes you understand those difference much clearly for sure.

What is Cache, Cookies, Session?

Cache

Cache is a temporary storage used by web browsers or web servers to store frequently accessed data. The purpose of cache is to improve performance by reducing the time needed to fetch data. Cache data is stored locally and is automatically cleared after a certain period of time. Cache does not store any user-specific information.

Cookie

Cookie is small text file stored by a website on the client-side (user's browser). Cookie is used to store user-specific information, such as user preferences, login status, and browsing history. Cookie is sent back to the server with each HTTP request, allowing the server to identify the user. Cookie has an expiration date, after which they are automatically deleted.

Session

Session is a way to maintain state between a user's interactions with a web application. It is typically used to store user-specific information, such as login status, shopping cart contents, and user preferences.
Session datas are stored on the server-side, and a session ID is stored in a cookie on the client-side to identify the user. It has a limited lifetime and are usually destroyed when the user logs out or the session expires.

The difference between Cache and Cookie

Cache’s function is to make the web page load faster while Cookie’s function is to track user’s different browsing activities.
Cache is composed of files, images and videos or something of the web pages you visited. Cookie stores information related to the user’s web browsing activity like user’s preferences, login information, etc.

The difference between Cookie and Session

Both Cookie and Session contain user information, but Cookie is stored at the client side while Session is stored on the server-side.
Cookie expire after a period of time while Session end when a user closes the browser.
The maximum size of Cookie is 4KB. However, there is no limit on the size or number of Session.

How do they work?

This is an example when you are doing shopping online.
Let's try to think about it.

Before you were doing shopping using one e-commerce website. Now, you want to use this e-commerce website for searching clothes again. When you open the website, it can be displayed earlier than before. It is because of Cache. Cache can be stored temporary the data which you see before to improve the performance.

After that you try to login in the app and realize that it has already inputed your account information on login form. It is because of Cookie. The website is stored the user information on the user browser.

When you start doing shopping, the product which you choose is stored Session. That's how this information can be stored while you are seeing the different page. But after you close the page, it will disappear.

Conclusion

Feature	Cache	Cookie	Session
Location	Browser	Browser	Server
Purpose	Speed up page load times	Preserve user settings, manage login sessions	Maintain user-specific session data
Lifespan	Until manually cleared or expired	Set expiration time	Ends with browser session
Capacity	Large	Small (about 4KB)	Large

DEV Community: Yu Hamada

Deploy Next.js Supabase App to Cloud Run using Artifact Registry and Secrets Manager

Table of Contents

Introduction

Step 1: Set Up Your Google Cloud Project

Step 2: Store Secrets in Google Secret Manager

Step 3: Set Up Artifact Registry

Step 4: Dockerize Your Next.js App

Step 5: Push Docker Image to Artifact Registry

Step 6: Deploy to Cloud Run

Caution

Next Step

Setting Up of Supabase CLI and Local Environment

Table of Contents

The benefits and strenghs of developing locally with Supabase

Prerequisites

Step 1: Installing Supabase CLI

when using npm

when using Homebrew(macOS)

Step 2: Creating a New Supabase Project

Step 3: Starting the Local Environment

Step 4: Access to Supabase Studio

Step 5: Connect to application

Other Supabase CLI Commands

Stop Supabase

Reset Supabase database

Display Supabase local environment variables

Cannot connect to the Docker daemon error

User Authentication with Auth.js in Next.js App Router

Table of Contents

Initial Setup

Implementing Authentication: Credentials and Google OAuth

Initial Setup

Install

Configure

NextAuthConfig settings

Route Handler Setup

Middleware

Get Session in Server Component

Get Session in Client Component

Folder structure

Implementing Authentication: Credentials and Google OAuth

Setting up prisma

Credentials

Add Google OAuth Provider

Setting Google OAuth application

Setting Redirect URI

Setup Environment Variables

Setup Provider

Creating Login and Signup page

Folder Structure

Understanding Modern Web Authentication Flows: Session vs JWT vs OAuth

Table of Contents

Introduction

Session-Based Authentication Flow

JWT Authentication Flow

OAuth 2.0 Authentication Flow

Conclusion

Session Authentication

JWT Authentication

OAuth Authentication

Understanding prisma codes for beginners in 100 seconds

Table of Contents

What is prisma?

The benefit of using prisma

Low learning cost

Unified data model management

Supports Multiple Databases

GUI Tool Included

Prisma commands and workflow

1. Install prisma

1-1. Install prisma

1-2. Install prisma development dependencies

2. Initialize prisma in our project

3. Define our schema

4. Generate prisma client

5. Create and Apply Migrations

6. Use Prisma Client in our code

7. Open Prisma Studio

Conclusion

1xx　Informational

2xx　Success

3xx　Redirection

4xx　Client Error

5xx　Server Error