2024-02-06

create t3-app で NextAuth + GitHub OAuth で認証機能を実装する

はじめに

kossyです。「T3 Stack 完全に理解した」と言いたいんですが、まだ完全に理解するところにすら辿り着けておらず、焦りを感じています。

今回は、 NextAuth + GitHub OAuth で認証機能をまずはローカル環境で動かせるところまで実装してみます。

環境

node 20.10.0
npm 10.2.3
next.js 14.0.4
trpc 10.43.6
next-auth 4.24.5
prisma 5.6.0

Oauth Appの作成

以下URLを参考に作成してください。作成する際、Email addresses に Read-only permissionを付与し、 callback URLには

http://localhost:3000/api/auth/callback/github

を指定してください。

docs.github.com

Email addresses に Read-only permissionを付与する背景については公式ドキュメントで解説されています。

next-auth.js.org

When creating a GitHub App, 
make sure to set the "Email addresses" account permission
to read-only in order to access private email addresses on GitHub.

GitHub アプリを作成するときは、GitHub 上のプライベート メール アドレスにアクセスできるように、
「メール アドレス」アカウントの権限を読み取り専用に設定してください。

OAuth App が作成されたら、Generate a new client secret ボタンを押して secret key を作成し、

Client ID と secret key を控えておいてください。(後ほど .env にIDとKeyを記載するため)

コードの修正

以下のファイルの修正が必要なので、手順を解説します。

src/server/auth.tsの修正
.envおよび src/env.jsの修正

1. src/server/auth.tsの修正

GitHubProviderのimportが必要なので、追加します。

import { PrismaAdapter } from "@next-auth/prisma-adapter";
import {
  getServerSession,
  type DefaultSession,
  type NextAuthOptions,
} from "next-auth";
import GitHubProvider from "next-auth/providers/github"; // <= 追加

また、authOptionsオブジェクトのprovidersオブジェクトも修正が必要です。

  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
    }),

2. .envおよび src/env.jsの修正

.envにGitHubのIDとTokenを記載してください。(ここで貼っているのはサンプル値です)

# Next Auth Discord Provider から下の定義の部分は消してOKです。

# Next Auth Github Provider
GITHUB_CLIENT_ID="YOUR_CLIENT_ID"
GITHUB_CLIENT_SECRET="YOUR_CLIENT_SECRET"

今の状態だとApp内で env.GITHUB_CLIENT_ID のように呼び出すことができない(型エラーになります)ため、env.jsの修正を行います。

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z
      .string()
      .refine(
        (str) => !str.includes("YOUR_MYSQL_URL_HERE"),
        "You forgot to change the default URL"
      ),
    NODE_ENV: z
      .enum(["development", "test", "production"])
      .default("development"),
    NEXTAUTH_SECRET:
      process.env.NODE_ENV === "production"
        ? z.string()
        : z.string().optional(),
    NEXTAUTH_URL: z.preprocess(
      // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
      // Since NextAuth.js automatically uses the VERCEL_URL if present.
      (str) => process.env.VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string() : z.string().url()
    ),
    DISCORD_CLIENT_ID: z.string(),
    DISCORD_CLIENT_SECRET: z.string(),
    GITHUB_CLIENT_ID: z.string(), // 追加
    GITHUB_CLIENT_SECRET: z.string(),  // 追加
  },

中略

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,  // 追加
    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,  // 追加
  },

動作確認

npm run dev で開発サーバーを立ち上げて、 http:localhost:3000 にアクセスすると、以下の画面が表示されます。

今回はGitHub OAuthのテストですので、Sign in with GitHub のボタンを押してください。

GitHubのログイン画面に遷移するので、必要事項を入力し、 Sign in ボタンを押してください。

ログインに成功すると、認可の要求をされますので、 Authorize アプリ名をクリックします。

認可処理が完了すると、T3 App のTOP画面にリダイレクトされます。

こんなに簡単に OAuth できていいのか！？というくらいアッサリ動きますね、、、

本番運用する際は OAuth Appの設定をより詳細に行わなければいけないので、それはまた別途記事にしたいと思います。

あとがき

認証ロジックの大部分がNextAuth内部で行われているため、かなりブラックボックスではありますね、、、

需要があれば NextAuth.js のコードリーディング記事でも書こうかしら。

2024-02-05

nvm use の自動実行

はじめに

kossyです。nodeのバージョンをGlobalに変えたくない(そもそもDocker使え！！)時、ありませんか？

今回は、.nvmrcを用意し、ディレクトリを切り替えた時に自動で .nvmrcで指定したバージョンに切り替える方法を解説します。

環境

MacBookPro Intel Core i5 nvm 0.34.0

結論

~/.bash_profile に以下のコードを追加

if [ -f ~/.bashrc ]; then
  . ~/.bashrc
fi

そして ~/.bashrcに以下のコードを追加します。

cd_nvm_use() {
  local nvmrc_path=".nvmrc"

  if [[ -f "$nvmrc_path" && -r "$nvmrc_path" ]]; then
    local nvmrc_node_version=$(cat "$nvmrc_path")
    local current_node_version=$(node -v | sed 's/^v//')

    if [[ "$nvmrc_node_version" != "$current_node_version" ]]; then
      nvm use || echo "Error: nvm use failed"
    fi
  fi
}

export PROMPT_COMMAND="cd_nvm_use; $PROMPT_COMMAND"

解説

.bash_profile

// if ステートメントは条件式が真（true）の場合に、後に続くコマンドを実行
if [ -f ~/.bashrc ]; then
  . ~/.bashrc // . (ドット) コマンドは別名 source コマンドであり、指定されたファイルの内容を現在のシェルコンテキストで実行する。この場合、.bashrc ファイルが存在する場合、その内容が現在のシェルセッションに読み込まれ、実行される。
fi

この設定は、ログインシェルおよび非ログインシェルの間で設定を共有するのが目的です。

このコードにより、ログイン時にもこれらのカスタマイズが適用されるようになります。

.bashrc

cd_nvm_use() {
  local nvmrc_path=".nvmrc"

  if [[ -f "$nvmrc_path" && -r "$nvmrc_path" ]]; then
    local nvmrc_node_version=$(cat "$nvmrc_path")
    local current_node_version=$(node -v | sed 's/^v//')

    if [[ "$nvmrc_node_version" != "$current_node_version" ]]; then
      nvm use || echo "Error: nvm use failed"
    fi
  fi
}

export PROMPT_COMMAND="cd_nvm_use; $PROMPT_COMMAND"

ディレクトリを移動するたびに、そのディレクトリ内に .nvmrc ファイルが存在するかどうかを確認し、

存在する場合はそのファイルに指定された Node.js のバージョンを使うように nvm use コマンドを実行するようにしています。

あとがき

横着して bash スクリプトにしましたが、おとなしく docker で環境構築をした方がいいと思います。。。

2024-02-04

Create T3 App で作成された layout.tsxのコードを読んでみる

はじめに

kossyです。やはり人間には絶対にやらなければならないというプレッシャーが必要だと感じています。

今日は Create T3 App で作成された layout.tsxのコードを読んでみようと思います。

概要

npm create t3-app@latest して、 App Router を有効にすると、src/app/layout.tsx というファイルが作成されます。

このファイルは、App Routerの機能で、自動でどのコンポーネントでも呼ばれるファイルになっています。

公式ドキュメントは以下です。

nextjs.org

コードリーディング

ChatGPTの助けを借りながら、一行ずつ読み進めていきましょう。

import

import "~/styles/globals.css";

import { Inter } from "next/font/google";

npm create t3-app@latest した時の、「Will you be using Tailwind CSS for styling?」に Yesと答えると、 globals.css がimportされます。

globals.cssの中身は以下で、

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindを使用するための定義が行われています。

import { Inter } from "next/font/google"; は InterというGoogleFontをimportしています。

fonts.google.com

Inter

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

フォントの設定オプションをオブジェクトとして渡しており、

subsets: ["latin"]

上記はフォントの文字セットを指定し、

variable: "--font-sans"

上記はフォントの変数名を設定しています。ここで指定された"--font-sans"は、CSS変数としてフォントを参照する際に使用され、この変数をCSSファイル内で使用することで、Interフォントをページ上で使用できるようになります。

metadata

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

HTMLのメタデータを定義している箇所です。layout.tsxファイル内ではどこからも参照されていませんが、titleを書き換えるときちんと反映されます。

nextjs.org

before

after

// Update T3 App に書き換えて保存
export const metadata = {
  title: "Update T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

あとがき

zero config を謳っているだけあって、今回紹介した箇所以外にも隠蔽されているロジックが多くて解読がしんどいんですが、

引き続きじっくり読んでいきたいと思います。

2024-02-03

next.config.jsのimagesの指定について調べてみた

kossyです。Next.js使いになるべく、必死でインプット中です。

まずはconfigファイルからだろう(異論は認めます)ということで、next.config.jsを触っている時に copilot にサジェストされた、imagesの指定について備忘録として残してみます。

以下はChatGPT(GPT-4)の回答です。

imagesオブジェクトは、Next.js アプリケーションの next.config.js ファイル内で使用され、
画像の最適化設定をカスタマイズします。
具体的には、images オブジェクト内の domains 配列に指定されたドメインからの画像を
Next.jsの画像最適化機能を使用して処理することを許可します。
この例では、avatars.githubusercontent.com というドメインからの画像が最適化の対象になります。

Next.js の画像最適化機能は、<Image /> コンポーネントを介して提供されます。
このコンポーネントは、画像を自動的に最適化し、
ロード時間を短縮し、パフォーマンスを向上させます。
しかし、デフォルトでは、Next.js は同一のオリジンから提供される画像のみを最適化します。
そのため、外部のドメイン（例えば、画像ホスティングサービスやCDN）から提供される画像を最適化するには、
そのドメインを next.config.js の images.domains 配列に明示的に追加する必要があります。

この設定を行うことで、指定されたドメインからの画像は、
Next.js によって自動的に最適化されるようになります。
画像は適切なサイズにリサイズされ、適切なフォーマット（例: WebP）に変換されることがあります。
これにより、ブラウザが必要とするサイズの画像をダウンロードし、
ページのロード時間を短縮し、ユーザー体験を向上させることができます。

最適化のための設定などができると言う理解で良さそうです。

ちなみに以下の記事を見ると、外部URLの画像を差し込むとエラーになるようです。

chaika.hatenablog.com

公式ドキュメントは以下で、domains以外にもremotePatternsの設定ができるようでした。 nextjs.org

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

まずはChatGPT大先生の解説だけ頭に叩き込んでおけば良さそうです。

勉強になりました。

2023-08-10

Rails・データベース・OSのTimeZoneの調べ方

必要に迫られタイトルに挙げたもののTimeZoneの調べ方をマスターしてしまったので、ブログに残しておきます。

# RailsのTimeZoneを調べる場合(コンソールからの調査)

# config/application.rbの設定が返る
Rails.application.config.time_zone
=> "Asia/Tokyo"

# データベースのTimeZoneを調べる場合(Railsコンソールからの調査)
# PostgreSQLを使っている前提

ActiveRecord::Base.connection.execute("SHOW timezone").first["timezone"]
=> "Asia/Tokyo"

# OSのTimeZoneを調べる場合
# Linuxサーバー前提

timedatectl | grep "Time zone"
=> Time zone: Japan (JST, +0900)

upsert_all メソッドのオプションにrecord_timestamps: true を渡してバルクインサートすると、なぜか時刻が18時間ズレるという問題に現在進行形で直面しておりまして、

色々調べたところ、record_timestamps: true だと DBの CURRENT_TIMESTAMP 関数が呼ばれてるようで、

https://github.com/rails/rails/blob/main/activerecord/lib/active_record/connection_adapters/abstract/database_statements.rb#L496

ActiveRecord::Base.connection.execute("select current_timestamp;").first
=> {"current_timestamp"=>"2023-08-10T03:47:53.130-09:00"}

見事に18時間ズレている！というところまではわかったのですが、もう upsert_all ではなく activerecord-importのimportメソッドでバルクインサートしようかなと考え始めているところでした。

activerecord-importのimportメソッドであれば、created_atおよびupdated_atの値に、timestamp = default_timezone == :utc ? Time.now.utc : Time.now の返り値を採用しているため、

upsert_allにこだわることもないかなと考え始めていました。同じ問題に遭遇している方はいるのだろうか。

2022-12-21

deviseのdestroyアクションを実行すると何が起こるか調べてみた

プログラミング

こんにちは！kossyです！

今回は、deviseのdestroyアクションを実行すると何が起こるか調べてみたので、備忘録としてブログに残してみたいと思います。

環境
Ruby 3.0.3
Rails 6.0.4
devise 4.8.1

前準備

pry-railsとpry-byebugをGemfileに記載してbundleした後、

sessions_controller.rbのdestroyアクションにbinding.pryを仕込みます。

    25: def destroy
    26:   binding.pry
    27:   signed_out = (Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name))
    28:   set_flash_message! :notice, :signed_out if signed_out
    29:   yield if block_given?
    30:   respond_to_on_destroy
    31: end

その後、適当なアカウントでログインして、ログアウトボタンを押してREPLを起動できたらOKです。

Devise.sign_out_all_scopes

From: /app/app/controllers/devise/sessions_controller.rb:27 Devise::SessionsController#destroy:

    25: def destroy
    26:   binding.pry
 => 27:   signed_out = (Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name))
    28:   set_flash_message! :notice, :signed_out if signed_out
    29:   yield if block_given?
    30:   respond_to_on_destroy
    31: end

> Devise.sign_out_all_scopes
=> true

Devise.sign_out_all_scopesはconfigファイルで設定できる値かと思われるので、見に行ってみます。

# Set this configuration to false if you want /users/sign_out to sign out
# only the current scope. By default, Devise signs out all scopes.
# config.sign_out_all_scopes = true

もし users/sign_out でサインアウトさせたい場合は false にする必要があるようです。

デフォルト値は true のようです。

「Deviseはすべてのスコープをサインアウトします。」と記載があるため、

例えば管理者権限と一般ユーザー権限の2つのモデルを作成し、両方の権限でログインしてからログアウトすると、全ての権限でログアウトになると思われます。

はじめに

環境

Oauth Appの作成

コードの修正

1. src/server/auth.tsの修正

2. .envおよび src/env.jsの修正

動作確認

あとがき

はじめに

環境

結論

解説

.bash_profile

.bashrc

あとがき

はじめに

概要

コードリーディング

import

Inter

metadata

before

after

あとがき

前準備

Devise.sign_out_all_scopes

sign_out

raw_session

session_serializer

まとめ

環境

paranoid_verificationってなに？

コードリーディング

need_paranoid_verification?

generate_paranoid_code

paranoid_attempts_remaining

verify_code

wikiを見てみる

ソースコードを見る

まとめ

実装方法

複数のAPIをフィルタリングしたい場合

大いに参考にさせていただいたサイト

docker-compose.ymlの編集

.irbrcの作成

.pryrcの作成

IRB.confのソースコードを読んでみる

Pry.configのソースコードを読んでみる

おわりに

大いに参考にさせていただいた記事