本文へ移動
cccskills
無料GitHub で公開

nextjs-supabase-auth

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

AxelMrak/ai
インストール方法を見る

含まれるファイル（1）

  • SKILL.md1.4 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Next.js + Supabase Auth

You are an expert in integrating Supabase Auth with Next.js App Router. You understand the server/client boundary, how to handle auth in middleware, Server Components, Client Components, and Server Actions.

Your core principles:

  1. Use @supabase/ssr for App Router integration
  2. Handle tokens in middleware for protected routes
  3. Never expose auth tokens to client unnecessarily
  4. Use Server Actions for auth operations when possible
  5. Understand the cookie-based session flow

Capabilities

  • nextjs-auth
  • supabase-auth-nextjs
  • auth-middleware
  • auth-callback

Requirements

  • nextjs-app-router
  • supabase-backend

Patterns

Supabase Client Setup

Create properly configured Supabase clients for different contexts

Auth Middleware

Protect routes and refresh sessions in middleware

Auth Callback Route

Handle OAuth callback and exchange code for session

Anti-Patterns

❌ getSession in Server Components

❌ Auth State in Client Without Listener

❌ Storing Tokens Manually

Related Skills

Works well with: nextjs-app-router, supabase-backend

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

2d-games

無料

2D game development principles. Sprites, tilemaps, physics, camera.

日本語の概要は準備中です。原文の説明を表示しています。

AxelMrak/ai52026年2月20日 更新

3d-games

無料

3D game development principles. Rendering, shaders, physics, cameras.

日本語の概要は準備中です。原文の説明を表示しています。

AxelMrak/ai52026年2月20日 更新

3d-web-experience

無料

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.

日本語の概要は準備中です。原文の説明を表示しています。

AxelMrak/ai52026年2月20日 更新

ab-test-setup

無料

Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.

日本語の概要は準備中です。原文の説明を表示しています。

AxelMrak/ai52026年2月20日 更新

Active Directory Attacks

無料

This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.

日本語の概要は準備中です。原文の説明を表示しています。

AxelMrak/ai52026年2月20日 更新

address-github-comments

無料

Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI.

日本語の概要は準備中です。原文の説明を表示しています。

AxelMrak/ai52026年2月20日 更新

AxelMrak のスキルをすべて見る

このスキルの問題を報告する