feat(auth): custom Ory Elements login UI (#380)

Author: huv1k

.env.example

@@ -29,6 +29,13 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 ### Ory Network configuration (required when AUTH_PROVIDER=ory)
 ### SDK URL of the Ory Network project (or custom domain like https://auth.e2b.dev)
 # ORY_SDK_URL=https://your-project.projects.oryapis.com
+### Browser-facing Kratos public URL for the custom @ory/elements-react login
+### page. Self-hosted: the Kratos public endpoint (harness default :4433).
+### Ory Network: same value as ORY_SDK_URL.
+# NEXT_PUBLIC_ORY_SDK_URL=http://localhost:4433
+### Set to 1 to enable the custom @ory/elements-react login/registration UI
+### (staging/preview and local dev). Leave unset in production to keep /sign-in.
+# NEXT_PUBLIC_ORY_CUSTOM_UI=1
 ### OAuth2 client credentials issued by Ory for this dashboard deployment
 # ORY_OAUTH2_CLIENT_ID=
 # ORY_OAUTH2_CLIENT_SECRET=

bun.lock

@@ -17,5 +17,8 @@
     "utils": "@/lib/utils",
     "hooks": "@/lib/hooks"
   },
-  "iconLibrary": "lucide"
+  "iconLibrary": "lucide",
+  "registries": {
+    "@svgl": "https://svgl.app/r/{name}.json"
+  }
 }

components.json

@@ -61,6 +61,8 @@
     "@opentelemetry/sdk-node": "^0.218.0",
     "@opentelemetry/semantic-conventions": "^1.36.0",
     "@ory/client-fetch": "^1.22.37",
+    "@ory/elements-react": "^1.2.0",
+    "@ory/nextjs": "^1.0.0-rc.1",
     "@radix-ui/react-avatar": "^1.1.4",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",

package.json

@@ -0,0 +1,23 @@
+'use client'
+
+import { FlowType } from '@ory/client-fetch'
+import type { OryNodeButtonProps } from '@ory/elements-react'
+import { useOryFlow } from '@ory/elements-react'
+import { Button } from '@/ui/primitives/button'
+
+export function OryButton({
+  node,
+  buttonProps,
+  isSubmitting,
+}: OryNodeButtonProps) {
+  const { flowType } = useOryFlow()
+  const label = node.meta?.label?.text
+  const loadingLabel =
+    flowType === FlowType.Registration ? 'Signing up…' : 'Signing in…'
+
+  return (
+    <Button {...buttonProps} loading={isSubmitting ? loadingLabel : undefined}>
+      {label}
+    </Button>
+  )
+}

src/app/login/components/custom-button.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { FlowType } from '@ory/client-fetch'
+import { useOryFlow } from '@ory/elements-react'
+
+export function OryCardHeader() {
+  const { flowType } = useOryFlow()
+  const title = flowType === FlowType.Registration ? 'Sign up' : 'Sign in'
+
+  return <h1 className="mb-6">{title}</h1>
+}

src/app/login/components/custom-card-header.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { FlowType } from '@ory/client-fetch'
+import { useOryFlow } from '@ory/elements-react'
+import Link from 'next/link'
+import type { PropsWithChildren } from 'react'
+
+export function OryCard({ children }: PropsWithChildren) {
+  return <div className="bg-bg flex w-full flex-col border p-6">{children}</div>
+}
+
+export function OryCardFooter() {
+  const { flowType } = useOryFlow()
+
+  if (flowType === FlowType.Login) {
+    return (
+      <p className="text-fg-secondary mt-6">
+        Don't have an account?{' '}
+        <Link href="/registration" className="text-fg underline">
+          Sign up
+        </Link>
+        .
+      </p>
+    )
+  }
+
+  if (flowType !== FlowType.Registration) {
+    return null
+  }
+
+  return (
+    <div className="text-fg-secondary mt-6 flex flex-col gap-4">
+      <p>
+        Already have an account?{' '}
+        <Link href="/login" className="text-fg underline">
+          Sign in
+        </Link>
+        .
+      </p>
+      <p className="text-fg-tertiary">
+        By signing up, you agree to our{' '}
+        <Link
+          href="/terms"
+          target="_blank"
+          className="text-fg-secondary underline"
+        >
+          Terms of Service
+        </Link>{' '}
+        and{' '}
+        <Link
+          href="/privacy"
+          target="_blank"
+          className="text-fg-secondary underline"
+        >
+          Privacy Policy
+        </Link>
+        .
+      </p>
+    </div>
+  )
+}

src/app/login/components/custom-card.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import TextSeparator from '@/ui/text-separator'
+
+export function OryDivider() {
+  return <TextSeparator text="or" />
+}

src/app/login/components/custom-divider.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+
+export function OryFormGroup({ children }: PropsWithChildren) {
+  return <div className="flex flex-col gap-4">{children}</div>
+}

src/app/login/components/custom-form-group.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import type { OryNodeInputProps } from '@ory/elements-react'
+import { Input } from '@/ui/primitives/input'
+
+export function OryInput({ inputProps, node }: OryNodeInputProps) {
+  const placeholder =
+    node.attributes.name === 'identifier' || inputProps.type === 'email'
+      ? 'you@example.com'
+      : inputProps.type === 'password'
+        ? '••••••••••••'
+        : undefined
+
+  return <Input {...inputProps} {...(placeholder ? { placeholder } : {})} />
+}