Zenn
🐥

「Remix v2」で「Clerk」の初期設定

2024/04/12に公開
Remix
Clerk
tech
npm install @clerk/remix

1. Rootファイルに以下を追加する

app\root.tsx
// app\root.tsx

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
+import type {  LoaderFunction } from "@remix-run/node";
+import { rootAuthLoader } from "@clerk/remix/ssr.server";
+import { ClerkApp, ClerkErrorBoundary } from "@clerk/remix"; 
+export const loader: LoaderFunction = (args) => rootAuthLoader(args);
+export const ErrorBoundary = ClerkErrorBoundary();

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>        
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

function App() {
  return <Outlet />;
}

+export default ClerkApp(App);

2. envファイル、ログインページを新規作成する

.env
CLERK_PUBLISHABLE_KEY=ewrhetyjetyjejeuky
CLERK_SECRET_KEY=ehyetyheyjreytjrj

CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_UP_URL=/sign-up
CLERK_AFTER_SIGN_IN_URL=/
CLERK_AFTER_SIGN_UP_URL=/
app\routes\sign-up.$.tsx
import { SignUp } from "@clerk/remix";
 
export default function SignUpPage() {
  return (
    <div>
      <h1>Sign Up route</h1>
      <SignUp />
    </div>
  );
}
app\routes\sign-in.$.tsx
import { SignIn } from "@clerk/remix";
 
export default function SignInPage() {
  return (
    <div>
      <h1>Sign In route</h1>
      <SignIn />
    </div>
  );
}

3. 使用例

app\routes\_index.tsx
import {
  SignedIn,
  SignedOut,
  RedirectToSignIn,
  UserButton,
  useAuth,
  SignOutButton,
  useUser,
  UserProfile,
} from "@clerk/remix";


import { Link } from "@remix-run/react";

function UserProfilePage() {
  return <UserProfile path="/" routing="path" />;
}

export default function Index() {
  const { isLoaded, userId } = useAuth();
  const { user } = useUser();

  if (!isLoaded || !userId) {
    return (
      <>
      <Link to="hoge">hogehoge</Link>
        <p>Hello</p>
        <SignedIn>
          <h1>Index route</h1>
          <p>You are signed in!</p>
          <UserButton />
        </SignedIn>

        <SignedOut>
          <RedirectToSignIn />
        </SignedOut>
      </>
    );
  }

  return (
    <div>
      <p>Hello, {user?.fullName}! You are logged in.</p>
      <p>Email: {user?.primaryEmailAddress?.emailAddress}</p>

      <Link to="hoge">hogehoge</Link>
      
      <UserProfilePage />
      <SignOutButton />
    </div>
  );
}

_index.tsxの表示

Discussion