Vercel AI SDKの登場により、Next.jsはAIアプリ構築のフレームワークとして有力な選択肢になりました。Next.jsで構築したAIアプリを組織内でプライベートに共有するには、ユーザー認証を実装する必要があります。本記事では、Next.jsで組織向けのユーザー認証を実装するためのツールや方法を比較します。もちろん、ユーザー認証サーバーをフルスクラッチで開発するという選択肢もありますが、本記事では実装工数を削減してくれるようなサービスの利用に注目します。

組織のメンバーにだけ共有したい場合のユーザー認証は、公開アプリケーションのユーザー認証とは異なる点が多くあります。

サインアップの制限

組織向けのユーザー認証では、新規のサインアップを許可してしまうと、URLを手にいれた第三者が勝手にサインアップをしてしまう可能性があります。そのため、サインアップをできなくする必要があります。

複雑なロール管理

組織向けのアプリは一つとは限らず、むしろ複数のアプリが同時に運用されることが多いと思います。その際、それぞれのユーザーにアプリごとに異なる権限を与えられるユーザー基盤を構築することが、データガバナンスの観点から重要です。

ログ収集とモニタリング

ユーザーログの収集とモニタリングをすることも、データガバナンスの観点からとても重要です。どのユーザーがどんな行動をしているのか、しっかりとモニタリングするために、ログとユーザー情報が紐付け可能な状態でログを管理する必要があります。

Squadbase: 組み込みのユーザー認証とロール管理、モダンな開発者体験

Squadbaseは組織向けのユーザー認証を備えたWebアプリのデリバリープラットフォームです。もちろん、Next.jsもデプロイすることができます。Next.jsの他にも、StreamlitやOllamaなどAIアプリ向けのフレームワークに対応しています。

組織内向けアプリのセキュアなデリバリーのために、以下のような機能を備えています。

組み込みのユーザー認証

Squadbaseにデプロイされたアプリは、Squadbaseのダッシュボードから招待したチームメンバーだけがアクセスが可能です。これはプラットフォームに組み込まれた機能であるため、一行のコードも追加する必要がありません。

Githubリポジトリと連携するだけで継続的デプロイメントが構築され、デプロイ環境はセキュリティで保護されます。VercelやNetlifyのようなデリバリープラットフォームですが、組織向けアプリのために設計され、必要な機能が組み込まれています。

ロール付与

Squadbaseではユーザーにロールを付与することができます。プラットフォームへのデプロイやチームの管理をするためのチームロールと、デプロイされたプロジェクトごとに設定できるプロジェクトロールがあります。アプリケーションのコードから、アクセスしているユーザーの情報を参照するには、SDKを利用することができます。

import { createClient } from "@squadbase/sdk/nextjs"

const squadbaes = await createClient(
	process.env.NEXT_PUBLIC_SUQUADBASE_PROJECT_ID,
	{
		mockUser: { ... }
	}
);

export default async function ServerComponent() {
  const { data: user, status: userStatus } = await squadbase.getUser()

  if (userStatus === "error") {
		 return <p>error</p>
  }

  return <p>Hello, { user.username } </p>
}

ログモニタリングとユーザーアナリティクス

Squadbaseでは、ランタイムのログやユーザーのアクセスログを自動で収集し、可視化します。ユーザーのアクセスログは集計され、アナリティクスとしてダッシュボードから閲覧することができます。それにより、組織向けアプリケーションの運用と改善に活用することができます。

[アナリティクスのスクショ]

[CTA]

Clerk: UIコンポーネントが魅力

ClerkはNext.js向けのユーザー認証ソリューションとして近年とても人気です。ユーザー基盤としてのサーバー機能だけでなく、たった数行でインテグレーションが完了するNext.js向けの美しいUIキットも提供しています。

組織内向けアプリの実装に役立つ機能として、以下のようなものが用意されています。

サインアップ制限

Clerkでは、サインアップに制限をかけることができます。サインアップモードを「制限付き」に設定すると、招待を受け取ったユーザーのみがアプリにサインアップすることが可能になります。

招待はClerkのダッシュボードから行うことができます。

認証フローUI

サインアップ / サインインやユーザープロフィール設定、外部サービスとのアカウント接続などの基本的な認証フローがUI付きで提供されているため、ユーザー認証関係の実装を数分で完了することができます。

SSO

OAuthやSAMLによるシングルサインオン機能を、ダッシュボードからの設定だけで簡単に実現できます。

このように、素晴らしい機能が提供されている一方で、以下の点には注意が必要です。

料金体系

Clerkは月間アクティブユーザーが10,000人以下であれば無料で使用することができます。一方で、Organization機能やブロックリストなどの機能を利用するためには月額$25の課金が必要です。特に、ユーザーにロールを設定するためにはOrganization機能が必要になるため、実質的には$25~/月の利用料がかかると考えていいと思います。

複数アプリの運用

複数アプリの運用時に、それぞれのアプリでユーザーのロールを切り替えたい時があると思います。たとえば、マーケティング部門のマネージャーはマーケティング部門向けのアプリでは管理者権限が必要で、全社向けのアプリでは閲覧者権限が必要といったケースです。

このような場合には、Orgnaizationを使って運用を実現するか、Clerk上で複数プロジェクトを運用する必要があります。

Auth0: 高い信頼性

エンタープライズ要件に対応できるユーザー認証ソリューションとして、Auth0は信頼性と開発者体験を高い次元で両立しています。

組織内向けアプリの実装に役立つ機能として、以下のようなものが用意されています。

SSO

OAuthやSAMLによるシングルサインオン機能を、ダッシュボードからの設定だけで簡単に設定することができます。また、エンタープライズ要件においてはOktaとの連携も魅力です。

ロール設定

Auth0では、ユーザープールの一人一人にロールを付与することができます。ロールの設定はダッシュボードやAPIから行うことができます。

一方で、以下の点には注意が必要です。

サインアップ制限

Auth0でもサインアップ制限は可能で、しっかりと構築すれば細かい設定が可能です。しかしながら、サインアップの無効化は一部のログイン方法に限られていたり、ユーザー招待のためにはAPIもを用いる必要があるなど、労力を要します。

複数アプリの運用

Auth0の場合でも、複数アプリのロール管理を実現するにはその分複雑な運用が必要になってしまいます。Auth0ではユーザーロールを自由に設定できますが、アプリケーション単位で共通のロールが設定されるため、複数の認証テナントを運用するか、アプリケーションごとのスコープを表現したロールを設定する必要があります。

MiddlewareでのIP制限

ユーザーごとの認証が必要なく、ただアクセス制限をかけたい場合、IP制限であればシンプルに実装することができます。

// middleware.ts

import { NextRequest, NextResponse } from 'next/server'

const IP_WHITELIST = ['xxx.xxx.xxx.xxx', 'yyy.yyy.yyy.yyy'];

export async function middleware(request: NextRequest) {
  const res = NextResponse.next();

  let ip: string = request.ip ?? request.headers.get('x-real-ip') ?? '';

  if(!ip && forwardedFor){
    const forwardedFor = request.headers.get('x-forwarded-for');
    ip = forwardedFor.split(',').at(0) ?? 'Unknown';
  }

  if(!IP_WHITELIST.includes(ip)){
      return NextResponse.redirect('/access-denied');
  }

  return res;
}

まとめ

セキュリティニーズ、運用能力、予算に合ったオプションを選択し、自信を持ってAIを搭載したNext.jsアプリをデリバリーしてください！