自分のアプリに、ログインを付ける

CursorかVS Codeを使っている人は、これがいちばん楽です。 エディタで自分のアプリのフォルダを開いてから、次のキーを押してください。 開いた時点で、もう自分のアプリの場所にいます。移動の操作が要りません。

キーが分からなければ、上のメニューの 「表示」→「ターミナル」 を選んでも同じです。

これで：いまいる場所にあるファイルの一覧が出ます。見るだけで、何も変えません。

> ls

> dir

% ls

ブラウザで dashboard.workos.com を開いて、ログインできればOKです。練習環境（Staging）のまま使います。

前に作ったアプリで構いません。ただし、そのままでは試さないでください。

Gitを使っている人は、複製したフォルダで「いまどうなっているか」を先に見ておきます。

これで：いま変更が残っていないかを確かめます。何も出なければ、きれいな状態です。

git status --short

これで：名前を指定したファイルだけを、いまの状態で保存します。

git add <ファイル名>
git commit -m "WorkOSを入れる前の状態"

Gitに慣れていない人は、無理に使わずフォルダの複製だけで進めてください。そのほうが確実です。

npx create-next-app@latest my-login-app --ts --app --use-npm --eslint --no-tailwind --no-src-dir --import-alias "@/*"
cd my-login-app

これで：いま入っているNode.jsの版が表示されます。何も壊しません。見るだけです。

node -v

これで：ブラウザが自動で開きます。そこでログインすると、パソコンとWorkOSのアカウントが結びつきます。

npx workos@latest auth login

開いたブラウザで、第1話で作ったアカウントでログインしてください。「どのアカウントだっけ」となった人は、第1話で登録したメールアドレスです。

npx は「入れずに、その場で動かす」という道具です。この3文字がコマンドの頭に付いているのはそのためです。

①これで：使える環境の一覧が出ます。まだ何も変えません。

npx workos@latest env list

②これで：どれを使うか聞かれます。Staging（練習）を選んでください。

npx workos@latest env switch

③これで：もう一度一覧を出して、切り替わったかを目で確かめます。ここは必ずやってください。

npx workos@latest env list

その「AI」がどこで動くのか（実機で確かめました）

初回に約230MB取ってくるのは、AIを動かすためのプログラム本体です （~/.workos/cache/agent-sdk/ に置かれます）。これは手元で動きます。 ただし、考えるところは手元ではありません。ログにこう書かれていました。

[credential-proxy] Started on http://127.0.0.1:52012,
                   forwarding to https://api.workos.com/llm-gateway

つまり、読み取ったコードは WorkOS のサーバーに送られます。 --direct を付けると自分のAnthropicのAPIキーで直接つなぐ形に変わりますが、 どちらにしても手元だけで完結はしません。

これで：部品を2つ入れて、必要なファイルを5つ作って、ダッシュボード側の設定を3つ書き込みます。数分かかります。

npx workos@latest install --no-branch --no-commit

うしろの2つには、それぞれ役目があります。どちらも「勝手にやらないで」という意味です。

• --no-branch … 新しいブランチを勝手に作るのを止める
• --no-commit … 勝手にコミットするのを止める

付けないと、変更内容を確かめる前に、別のブランチでコミットまで済んでしまいます。次の手順（何が変わったか見る）ができなくなります。

止まってしまったときは、--debug を付けて打ち直すと詳しい情報が出ます。

npx workos@latest install --no-branch --no-commit --debug

①これで：増えたファイルと変わったファイルの名前だけが出ます。

git status --short --untracked-files=all

②これで：どのファイルが何行変わったかが出ます。中身は出ないので安全です。

git diff --stat

③これで：名前を指定したファイルだけ、中身の変化を見ます。

git diff -- app/ proxy.ts middleware.ts package.json

④これで：.env.local が Git に載っていないかを確かめます。開かずに確かめられます。

git check-ignore -v .env.local
git ls-files -- .env.local

①で出た名前を見ながら、確かめるのはこの3点です。

• 見たことのないファイルが増えていないか
• 自分が書いた大事なファイルが書き換えられていないか
• .env.local ができているか

Error: Cookies can only be modified in a Server Action or Route Handler.

エディタで、プロジェクト直下のこのファイルを開いてください。

これで：ログインしていない人を、ページに着く前に止めてログイン画面へ送ります。

import { authkitProxy } from '@workos-inc/authkit-nextjs';

export default authkitProxy({
  middlewareAuth: {
    enabled: true,
    unauthenticatedPaths: ['/'],
  },
});

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico).*)',
  ],
};

import { authkitMiddleware } from '@workos-inc/authkit-nextjs';

export default authkitMiddleware({
  middlewareAuth: {
    enabled: true,
    unauthenticatedPaths: ['/'],
  },
});

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

4番がうまくいった人は、ここは飛ばして 03 へ進んでください。

会社や学校のパソコンで、AIがコードを書き換えるコマンドを実行できないことがあります。その場合は、部品だけ手で入れられます。

npm install @workos-inc/authkit-nextjs @workos-inc/node

そのうえで、自分で用意するものが4つあります。コマンドは1つで済みますが、書く量は増えます。

• 帰り道を受け止める受け口のファイル
• アプリ全体を包む設定
• 毎回通って、ログイン状態をページに渡す場所
• .env.local に4つの値

ブラウザでダッシュボードを開いたら、まず Staging の表示になっているか見てください。 練習と本番は中身が別物です。ここを間違えると、設定した先が違います。

そのうえで、Applications を開いて、対象のアプリを選びます。

選んだアプリの Redirects タブを開きます。 STEP1のコマンドが自動で入れてくれているので、ここは見るだけです。

http://localhost:3000/auth/callback

さっきと同じ画面で Sign-out URI（ログアウト後の戻り先）を探して、これを入れて保存します。 ここは自動では入りません。自分で足す唯一の設定です。

http://localhost:3000

エディタの左側にファイルの一覧が出ているはずです。そこで、 app の下に secret というフォルダを作り、その中に page.tsx を置きます。

app/secret/page.tsx

ターミナルから作りたい人は

mkdir -p app/secret

mkdir app\secret

mkdir -p app/secret

空のファイルなので、まるごと貼って大丈夫です。ログアウトのボタンまで入っています。 意味が分からなくても動きます。読むのはあとでいいです。

import { withAuth, signOut } from '@workos-inc/authkit-nextjs';

export default async function Page() {
  const { user } = await withAuth({ ensureSignedIn: true });

  return (
    <div>
      <p>ようこそ、{user.firstName ?? user.email} さん</p>
      <form action={async () => { 'use server'; await signOut(); }}>
        <button type="submit">ログアウト</button>
      </form>
    </div>
  );
}

ここは1枚目がちゃんと動いてからでいいです。初めての人は飛ばして 05 へ。

1. いちばん上に import を1行足す
2. export default function Page() を export default async function Page() にする
3. return の前に withAuth の1行を足す

import { withAuth } from '@workos-inc/authkit-nextjs';

const { user } = await withAuth({ ensureSignedIn: true });

'use client';
import { useAuth } from '@workos-inc/authkit-nextjs/components';

export default function Page() {
  const { user, loading } = useAuth({ ensureSignedIn: true });
  if (loading) return <p>読み込み中…</p>;
  return <p>ようこそ、{user.firstName ?? user.email} さん</p>;
}

これで：自分のパソコンの中でアプリが動き出します。この窓は開いたままにしてください。閉じると止まります。

npm run dev

ブラウザで、さっき作ったページを開きます。ターミナルは開いたままにしておいてください。

http://localhost:3000/secret

こういう順番で動きます。

1. ページを開こうとする
2. ログインしていないので、WorkOSのログイン画面へ飛ばされる
3. 前回、自分で色を決めたあの画面が出る
4. メールアドレスで登録する（自分のアドレスでOK。他人のアドレスは使わない）
5. さっきのページに戻ってくる
6. 「ようこそ、◯◯さん」と出る

• ログアウトして、もう一度開く … また入口で止められるはずです。ここでエラーが出たら 03 の3番です
• トップページを開く … こちらはログインなしで見られます。unauthenticatedPaths に '/' を入れたからです
• 別のブラウザ（またはシークレットウィンドウ）で同じURLを開く … ログインしていない状態なので、入口で止められます
• 守っていないページを開く … 今までどおり、誰でも開けます。守るのはページ単位だ、ということが体で分かります

.env.local について守るのは、この3つだけです。

• Gitに追跡させない（02の4番で確認しました）
• 画面に出さない（git diff を裸で打たない）
• 人に見せない（画面共有中は開かない）

これで：いまのプロジェクトを調べて、WorkOSまわりの問題点を並べてくれます。何も書き換えません。

npx workos@latest doctor

自分で原因を探す前に、これを1回打ってみてください。当たりが付きます。