インストール＆クイックスタート

インストール

npm / pnpm / yarn

# npm
npm install @authrim/web

# pnpm
pnpm add @authrim/web

# yarn
yarn add @authrim/web

アプリケーションでインポート：

import { createAuthrim } from '@authrim/web';

CDN（スクリプトタグ）

プロトタイピングや静的HTMLサイトでは、CDNからSDKを読み込めます：

<script src="https://unpkg.com/@authrim/web@latest/dist/authrim-web.umd.global.js"></script>

グローバルオブジェクト AuthrimWeb が利用可能になります：

<script>
  const auth = await AuthrimWeb.createAuthrim({
    issuer: 'https://auth.example.com',
    clientId: 'my-app',
  });
</script>

前提条件

SDKを使用する前に、以下が必要です：

Authrimインスタンス — 稼働中のAuthrimサーバー（例：https://auth.example.com）
クライアントID — Authrim管理パネルでアプリケーションを登録してclientIdを取得
許可されたオリジン — クライアント設定にアプリのオリジン（例：https://myapp.com）を追加
コールバックURL（ソーシャルログイン / OAuth用） — https://myapp.com/callback.html をリダイレクトURIとして登録

初期化

createAuthrim() でAuthrimクライアントを作成します：

import { createAuthrim } from '@authrim/web';

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
});

この関数はブラウザプロバイダー（暗号、ストレージ、HTTPクライアント）を内部で初期化するため非同期です。アプリケーション起動時に一度呼び出し、返されたクライアントを再利用してください。

OAuth / OIDC を有効にする

OAuthの機能（ポップアップログイン、サイレント認証、クロスドメインSSO）を有効にするには enableOAuth: true を設定します：

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  enableOAuth: true,
});

// auth.oauth が利用可能になります
await auth.oauth.popup.login();

クイックスタート：Passkeyログイン

Passkeyによるサインアップとサインインの最小限の例：

import { createAuthrim } from '@authrim/web';

// 1. 初期化
const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
});

// 2. 既に認証済みか確認
const isLoggedIn = await auth.session.isAuthenticated();
if (isLoggedIn) {
  console.log('既にサインイン済みです');
}

// 3. Passkeyでサインアップ（新規ユーザー）
const signUpResult = await auth.passkey.signUp({
  email: '[email protected]',
});
if (signUpResult.error) {
  console.error('サインアップ失敗:', signUpResult.error.message);
} else {
  console.log('ようこそ！', signUpResult.data.user);
}

// 4. Passkeyでサインイン（既存ユーザー）
const loginResult = await auth.passkey.login();
if (loginResult.error) {
  console.error('ログイン失敗:', loginResult.error.message);
} else {
  console.log('サインイン完了:', loginResult.data.user);
}

// 5. サインアウト
await auth.signOut();

クイックスタート：Email Code

// コード送信
const sendResult = await auth.emailCode.send('[email protected]');
if (sendResult.error) {
  console.error(sendResult.error.message);
}

// コード検証（ユーザーが受信したコードを入力）
const verifyResult = await auth.emailCode.verify('[email protected]', '123456');
if (verifyResult.error) {
  console.error(verifyResult.error.message);
} else {
  console.log('認証完了:', verifyResult.data.user);
}

クイックスタート：ソーシャルログイン

// Googleでポップアップログイン
const result = await auth.social.loginWithPopup('google');
if (result.error) {
  console.error(result.error.message);
} else {
  console.log('Googleでサインイン:', result.data.user);
}

ストレージオプション

デフォルトでは、SDKはメモリストレージを使用します。ブラウザ内の状態は現在のページライフサイクルに閉じ、リロードや遷移でクリアされます。リロード後の保持や長期保持が必要な場合だけWeb Storageを明示的に選択してください：

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  storage: {
    prefix: 'authrim',        // キープレフィックス（デフォルト: 'authrim'）
    storage: 'sessionStorage', // default: 'memory'
  },
});

タイプ	持続性	セキュリティ	ユースケース
`memory`	現在のページライフサイクル	最も安全。DOMストレージを使わない	厳格なブラウザトークンフローのデフォルト
`sessionStorage`	タブセッション（リロード後も保持、タブを閉じると消去）	タブ内のJSから参照可能	リロード後の保持が必要なアプリ
`localStorage`	永続的（ブラウザ再起動後も保持）	タブをまたいでJSから参照可能	汎用 SDK/OAuth state 用。Direct Auth token persistence には使われません

HTTPS要件

本番環境ではHTTPSが必要です。WebAuthn（Passkey）は安全でないオリジンでは動作しません。

本番環境: HTTPS必須
開発環境: localhost と 127.0.0.1 ではHTTPが許可されます

次のステップ

サンプルアプリ — 完全な動作サンプルのウォークスルー
Passkey認証 — WebAuthnフローの詳細
Email Code認証 — OTPベースのパスワードレスログイン
ソーシャルログイン — Google、GitHub、Apple等