mcpField
T
tinyship-auth

tinyship-auth

github.com/tinyshipcn開発576 回インストール1 週間前に更新
リポジトリ

tinyship-auth について

Better Authを基盤とする、TinyShipの認証プロバイダー設定スキルです。メールとパスワード、GoogleやGitHubのOAuth、WeChat、SMS OTPに加え、各フロントエンドのログインボタン設定を扱います。

主な機能

  1. 01メールとパスワードの設定
  2. 02Google OAuthの設定
  3. 03GitHub OAuthの設定
  4. 04WeChatログインの設定
  5. 05SMS OTPの設定
  6. 06フロントエンドのログインボタン設定

活用シーン

  1. 01メール認証とパスワードリセットの有効化
  2. 02ソーシャルログインの追加
  3. 03電話番号によるOTPログインの設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tinyshipcn/tinyship-skills --skill tinyship-auth

インストール後、Claude Code で/tinyship-authを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
github-oauth.md
google-oauth.md
sms-login.md
wechat-login.md

詳細

TinyShip 認証プロバイダーの設定

TinyShip で認証方法を設定するためのガイドです。Better Auth をベースにしています。

利用可能な認証方法

方法難易度必要なもの
メールアドレス／パスワード簡単セットアップ後、そのまま利用可能
Google OAuth中程度Google Cloud Console プロジェクト
GitHub OAuth中程度GitHub OAuth App
WeChat ログイン複雑WeChat Open Platform ＋ 営業許可証
SMS OTP複雑Twilio または Aliyun SMS アカウント

設定したい方法をユーザーに確認してから、該当するセクションに従ってください。

メールアドレス／パスワード（デフォルト）

基本的なセットアップ後、そのまま利用できます。メールアドレスの認証とパスワードリセットメールを有効にするには、 メールプロバイダーを設定します。

  1. Resend を設定します（最も簡単です）。resend.com から API キーを取得します。
  2. .env に追加します。
RESEND_API_KEY="re_xxxxx"
EMAIL_DEFAULT_FROM="[email protected]"

詳しいメール認証の設定については、docs/user-guide/auth/email.md をお読みください。

Google OAuth

詳しい設定手順については、references/google-oauth.md をお読みください。

概要：

  1. Google Cloud Console でプロジェクトを作成します
  2. OAuth 同意画面を設定します
  3. リダイレクト URI を {APP_BASE_URL}/api/auth/callback/google に設定して、OAuth 2.0 認証情報を作成します
  4. .env に追加します。
GOOGLE_CLIENT_ID="your-client-id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GOCSPX-xxxxx"

GitHub OAuth

詳しい設定手順については、references/github-oauth.md をお読みください。

概要：

  1. GitHub Settings > Developer settings > OAuth Apps > New に移動します
  2. コールバック URL を {APP_BASE_URL}/api/auth/callback/github に設定します
  3. .env に追加します。
GITHUB_CLIENT_ID="Ov23xxxxxxxxxx"
GITHUB_CLIENT_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

WeChat ログイン

詳しい設定手順については、references/wechat-login.md をお読みください。

概要：

  1. WeChat Open Platform に登録します（営業許可証が必要です）
  2. ウェブアプリケーションを作成します
  3. .env に追加します。
NEXT_PUBLIC_WECHAT_APP_ID="wx_xxxxx"
VITE_WECHAT_APP_ID="wx_xxxxx"
WECHAT_APP_SECRET="xxxxx"

SMS OTP ログイン

詳しい設定手順については、references/sms-login.md をお読みください。

概要（Twilio）：

  1. Twilio アカウントを作成し、認証情報を取得します
  2. .env に追加します。
TWILIO_ACCOUNT_SID="ACxxxxx"
TWILIO_AUTH_TOKEN="xxxxx"
TWILIO_DEFAULT_FROM="+1234567890"

概要（Aliyun）：

  1. Aliyun SMS サービスを有効にし、署名とテンプレートを作成します
  2. .env に追加します。
ALIYUN_ACCESS_KEY_ID="xxxxx"
ALIYUN_ACCESS_KEY_SECRET="xxxxx"
ALIYUN_SMS_SIGN_NAME="YourSign"
ALIYUN_SMS_TEMPLATE_CODE="SMS_000000000"

フロントエンド：ログインボタンの設定

プロバイダーを追加したら、ソーシャル認証ボタンを更新して、表示／非表示を切り替えます。

Next.js： apps/next-app/components/social-auth.tsx を編集します。

const defaultProviders: SocialProvider[] = ['google', 'github'];
// Add or remove: 'google', 'github', 'wechat', 'phone'

Nuxt.js： apps/nuxt-app/components/SocialAuth.vue を編集します。

providers: () => ['google', 'github']
// Add or remove: 'google', 'github', 'wechat', 'phone'

TanStack Start： apps/tanstack-app/src/components/social-auth.tsx を編集します（Next.js と同じパターンです）。

確認

  1. .env を変更した後、開発サーバーを再起動します
  2. /signin にアクセスし、設定したプロバイダーが表示されることを確認します
  3. 各プロバイダーのログインフローをテストします
  4. /admin/users の管理パネルにユーザーが表示されることを確認します

TinyShip リポジトリ内の参照ファイル

  • config/auth.ts — 認証プロバイダーの設定
  • libs/auth/AGENTS.md — 認証ライブラリのアーキテクチャ
  • docs/user-guide/auth/overview.md — 認証ドキュメントのインデックス
  • apps/next-app/components/social-auth.tsx — Next.js のソーシャル認証ボタン
  • apps/tanstack-app/src/components/social-auth.tsx — TanStack Start のソーシャル認証ボタン
  • apps/nuxt-app/components/SocialAuth.vue — Nuxt.js のソーシャル認証ボタン

コメント

Markdown 対応