-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/docs/components/organization-creator/page.tsx b/app/docs/components/organization-creator/page.tsx
index 238cc12..e01d520 100644
--- a/app/docs/components/organization-creator/page.tsx
+++ b/app/docs/components/organization-creator/page.tsx
@@ -61,7 +61,7 @@ export default function CreateOrganizationPage() {
-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/docs/components/organization-metadata/page.tsx b/app/docs/components/organization-metadata/page.tsx
index 101fef4..b9adf0f 100644
--- a/app/docs/components/organization-metadata/page.tsx
+++ b/app/docs/components/organization-metadata/page.tsx
@@ -61,7 +61,7 @@ export default function OrganizationMetadata() {
-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/docs/components/organization-sso/page.tsx b/app/docs/components/organization-sso/page.tsx
index d5493b4..40247c5 100644
--- a/app/docs/components/organization-sso/page.tsx
+++ b/app/docs/components/organization-sso/page.tsx
@@ -73,7 +73,7 @@ export default function OrganizationMetadata() {
-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/docs/components/organization-switcher/data/usage.ts b/app/docs/components/organization-switcher/data/usage.ts
index a45a8a4..8300821 100644
--- a/app/docs/components/organization-switcher/data/usage.ts
+++ b/app/docs/components/organization-switcher/data/usage.ts
@@ -1,19 +1,4 @@
export const componentUsage = ``;
diff --git a/app/docs/components/organization-switcher/page.tsx b/app/docs/components/organization-switcher/page.tsx
index 68a33e1..55b3bda 100644
--- a/app/docs/components/organization-switcher/page.tsx
+++ b/app/docs/components/organization-switcher/page.tsx
@@ -19,21 +19,6 @@ export default function OrganizationSwitcherPage() {
diff --git a/app/docs/components/user-button/data/usage.ts b/app/docs/components/user-button/data/usage.ts
index e599477..53a9c5f 100644
--- a/app/docs/components/user-button/data/usage.ts
+++ b/app/docs/components/user-button/data/usage.ts
@@ -1,4 +1,4 @@
-export const componentUsage = `
+export const componentUsage = `
Theme
diff --git a/app/docs/components/user-button/page.tsx b/app/docs/components/user-button/page.tsx
index bab6876..fbad6af 100644
--- a/app/docs/components/user-button/page.tsx
+++ b/app/docs/components/user-button/page.tsx
@@ -22,15 +22,7 @@ export default function UserButtonPage() {
description="Offers a user menu for logged-in users, showing their info and allowing them to logout."
>
-
+
Theme
diff --git a/app/docs/components/user-metadata/data/usage.ts b/app/docs/components/user-metadata/data/usage.ts
index 07566cb..34fa3d8 100644
--- a/app/docs/components/user-metadata/data/usage.ts
+++ b/app/docs/components/user-metadata/data/usage.ts
@@ -7,7 +7,7 @@ export const componentUsage = `
-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/docs/components/user-profile/data/usage.ts b/app/docs/components/user-profile/data/usage.ts
index 049d338..d4f15ca 100644
--- a/app/docs/components/user-profile/data/usage.ts
+++ b/app/docs/components/user-profile/data/usage.ts
@@ -1,15 +1,9 @@
export const componentUsage = `
-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/docs/components/user-sessions/data/usage.ts b/app/docs/components/user-sessions/data/usage.ts
index 7063650..6bb51ee 100644
--- a/app/docs/components/user-sessions/data/usage.ts
+++ b/app/docs/components/user-sessions/data/usage.ts
@@ -1,5 +1,4 @@
export const componentUsage = ` {
return { sessions, status: 200 };
diff --git a/app/docs/components/user-sessions/example.tsx b/app/docs/components/user-sessions/example.tsx
index bbb2a2e..4f23c0c 100644
--- a/app/docs/components/user-sessions/example.tsx
+++ b/app/docs/components/user-sessions/example.tsx
@@ -1,21 +1,7 @@
"use client";
-import { z } from "zod";
-
import UserSessions from "@/registry/components/user-sessions";
-const languages = ["en-US", "es-AR"] as const;
-
-const user = {
- given_name: "John",
- family_name: "Doe",
- nickname: "john.doe",
- name: "John Doe",
- email: "john.doe@acme.com",
- sub: "auth0|123456789101112",
- sid: "123123-123123-123123-123123",
-};
-
const sessions = [
{
id: "123123-123123-123123-123123",
@@ -52,7 +38,6 @@ const sessions = [
export function Example() {
return (
{
return { sessions, status: 200 };
diff --git a/app/docs/components/user-sessions/page.tsx b/app/docs/components/user-sessions/page.tsx
index ebf7ca5..9cf79cc 100644
--- a/app/docs/components/user-sessions/page.tsx
+++ b/app/docs/components/user-sessions/page.tsx
@@ -131,7 +131,7 @@ export default function UserProfile() {
-
+
By design, our components provide basic behavior without making
any requests to the Auth0 Management API. To help you implement
diff --git a/app/example/components/top-bar.tsx b/app/example/components/top-bar.tsx
index a6b2b90..c6d1b4e 100644
--- a/app/example/components/top-bar.tsx
+++ b/app/example/components/top-bar.tsx
@@ -2,20 +2,16 @@
import { useState } from "react";
-import {
- DropdownMenu,
- DropdownMenuGroup,
- DropdownMenuItem,
- DropdownMenuShortcut,
-} from "@/components/ui/dropdown-menu";
-import { CLAIMS } from "@/lib/utils";
+import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuShortcut } from "@/components/ui/dropdown-menu";
import OrganizationSwitcher from "@/registry/components/organization-switcher";
import UserButton from "@/registry/components/user-button";
-import { Claims } from "@auth0/nextjs-auth0";
+import { useUser } from "@auth0/nextjs-auth0";
import { MainNav } from "../dashboard/components/main-nav";
-export default function TopBar({ user }: { user: Claims }) {
+export default function TopBar() {
+ const { user } = useUser();
+
const [orgsDot, setOrgsDot] = useState(true);
const [userDot, setUserDot] = useState(true);
@@ -27,6 +23,10 @@ export default function TopBar({ user }: { user: Claims }) {
setUserDot(false);
}
+ if (!user) {
+ return null;
+ }
+
return (
@@ -41,8 +41,6 @@ export default function TopBar({ user }: { user: Claims }) {
)}
-
+
- {user.org_id && (
+ {user?.org_id && (
Organization
diff --git a/app/example/create-organization/components/create-organizations.tsx b/app/example/create-organization/components/create-organizations.tsx
index 3e207b1..2eb4928 100644
--- a/app/example/create-organization/components/create-organizations.tsx
+++ b/app/example/create-organization/components/create-organizations.tsx
@@ -20,7 +20,7 @@ export function CreateOrganizationPage() {
if (response.organization) {
router.push(
- `/api/auth/login?organization=${response.organization.id}&returnTo=${pathname}`
+ `/auth/login?organization=${response.organization.id}&returnTo=${pathname}`
);
}
diff --git a/app/example/create-organization/components/plan-picker.tsx b/app/example/create-organization/components/plan-picker.tsx
index 5661b8f..410fb27 100644
--- a/app/example/create-organization/components/plan-picker.tsx
+++ b/app/example/create-organization/components/plan-picker.tsx
@@ -28,8 +28,8 @@ const PlanCard = ({ name, price, features, selected }: PlanCardProps) => {
return (
{name}
diff --git a/app/example/create-organization/page.tsx b/app/example/create-organization/page.tsx
index 6f08758..af6ae07 100644
--- a/app/example/create-organization/page.tsx
+++ b/app/example/create-organization/page.tsx
@@ -1,25 +1,22 @@
import { ChevronLeftIcon } from "lucide-react";
import { ExamplesLayout } from "@/components/www/layouts";
-import { getSession } from "@auth0/nextjs-auth0";
import TopBar from "../components/top-bar";
import { CreateOrganizationPage } from "./components/create-organizations";
-export default async function CreateOrganization() {
- const session = await getSession();
-
+export default function CreateOrganization() {
return (
-
+
- {session &&
}
+ {
}
-
+
Back to Dashboard
diff --git a/app/example/dashboard/components/dashboard-page.tsx b/app/example/dashboard/components/dashboard-page.tsx
index 4c2a3e6..23283bc 100644
--- a/app/example/dashboard/components/dashboard-page.tsx
+++ b/app/example/dashboard/components/dashboard-page.tsx
@@ -5,15 +5,8 @@
import { Metadata } from "next";
import TopBar from "@/app/example/components/top-bar";
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { getSession } from "@auth0/nextjs-auth0";
import { Overview } from "./overview";
import { RecentSales } from "./recent-sales";
@@ -23,12 +16,10 @@ export const metadata: Metadata = {
description: "Example dashboard app built using the components.",
};
-export default async function DashboardPage() {
- const session = await getSession();
-
+export default function DashboardPage() {
return (
- {session &&
}
+ {
}
Dashboard
diff --git a/app/example/dashboard/components/main-nav.tsx b/app/example/dashboard/components/main-nav.tsx
index 443f1c2..a43b676 100644
--- a/app/example/dashboard/components/main-nav.tsx
+++ b/app/example/dashboard/components/main-nav.tsx
@@ -1,5 +1,3 @@
-import Link from "next/link";
-
import { cn } from "@/lib/utils";
export function MainNav({
diff --git a/app/example/dashboard/page.tsx b/app/example/dashboard/page.tsx
index 43305bb..e61b2d0 100644
--- a/app/example/dashboard/page.tsx
+++ b/app/example/dashboard/page.tsx
@@ -1,13 +1,10 @@
import { ExamplesLayout } from "@/components/www/layouts";
-import { getSession } from "@auth0/nextjs-auth0";
import DashboardPage from "./components/dashboard-page";
-export default async function Dashboard() {
- const session = await getSession();
-
+export default function Dashboard() {
return (
-
+
);
diff --git a/app/example/organization/components/profile-page.tsx b/app/example/organization/components/profile-page.tsx
index 80a6d60..b36bc4e 100644
--- a/app/example/organization/components/profile-page.tsx
+++ b/app/example/organization/components/profile-page.tsx
@@ -3,12 +3,10 @@
import { z } from "zod";
import OrganizationProfile from "@/registry/components/organization-profile";
-import { Claims } from "@auth0/nextjs-auth0";
-export function ProfilePage({ user }: { user: Claims }) {
+export function ProfilePage() {
return (
+
- {session &&
}
+
diff --git a/app/example/user-profile/components/profile-page.tsx b/app/example/user-profile/components/profile-page.tsx
index 508a398..32948c1 100644
--- a/app/example/user-profile/components/profile-page.tsx
+++ b/app/example/user-profile/components/profile-page.tsx
@@ -1,35 +1,5 @@
-"use client";
-
-import { z } from "zod";
-
import UserProfile from "@/registry/components/user-profile";
-import { Claims } from "@auth0/nextjs-auth0";
-
-const languages = ["en-US", "es-AR"] as const;
-export function ProfilePage({ user }: { user: Claims }) {
- return (
-
- );
+export function ProfilePage() {
+ return
;
}
diff --git a/app/example/user-profile/page.tsx b/app/example/user-profile/page.tsx
index 6eebcb9..9633140 100644
--- a/app/example/user-profile/page.tsx
+++ b/app/example/user-profile/page.tsx
@@ -1,32 +1,28 @@
import { ChevronLeftIcon } from "lucide-react";
import { ExamplesLayout } from "@/components/www/layouts";
-import { getSession } from "@auth0/nextjs-auth0";
import TopBar from "../components/top-bar";
import { ProfilePage } from "./components/profile-page";
export default async function Profile() {
- const session = await getSession();
- const user = session!.user;
-
return (
-
+
- {session &&
}
+ {
}
diff --git a/app/globals.css b/app/globals.css
index d53cbbb..49d007a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,115 +1,149 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
-@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 20 14.3% 4.1%;
- --card: 0 0% 100%;
- --card-foreground: 20 14.3% 4.1%;
- --popover: 0 0% 100%;
- --popover-foreground: 20 14.3% 4.1%;
- --primary: 215 100% 42%;
- --primary-foreground: 60 9.1% 97.8%;
- --secondary: 60 4.8% 95.9%;
- --secondary-foreground: 24 9.8% 10%;
- --muted: 60 4.8% 95.9%;
- --muted-foreground: 25 5.3% 44.7%;
- --accent: 60 4.8% 95.9%;
- --accent-foreground: 24 9.8% 10%;
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 60 9.1% 97.8%;
- --border: 20 5.9% 90%;
- --input: 20 5.9% 90%;
- --ring: 24.6 95% 53.1%;
- --radius: 0.3125rem;
+@theme {
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+
+ --radius-lg: var(--radius);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-sm: calc(var(--radius) - 4px);
+
+ /* --animate-accordion-down: accordion-down 0.2s ease-out; */
+ /* --animate-accordion-up: accordion-up 0.2s ease-out; */
+
+ /* @keyframes accordion-down {
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ }
}
+ @keyframes accordion-up {
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+ to {
+ height: 0;
+ }
+ } */
+}
- .dark {
- --background: 20 14.3% 4.1%;
- --foreground: 60 9.1% 97.8%;
- --card: 20 14.3% 4.1%;
- --card-foreground: 60 9.1% 97.8%;
- --popover: 20 14.3% 4.1%;
- --popover-foreground: 60 9.1% 97.8%;
- --primary: 20.5 90.2% 48.2%;
- --primary-foreground: 60 9.1% 97.8%;
- --secondary: 12 6.5% 15.1%;
- --secondary-foreground: 60 9.1% 97.8%;
- --muted: 12 6.5% 15.1%;
- --muted-foreground: 24 5.4% 63.9%;
- --accent: 12 6.5% 15.1%;
- --accent-foreground: 60 9.1% 97.8%;
- --destructive: 0 72.2% 50.6%;
- --destructive-foreground: 60 9.1% 97.8%;
- --border: 12 6.5% 15.1%;
- --input: 12 6.5% 15.1%;
- --ring: 20.5 90.2% 48.2%;
+@utility container {
+ margin-inline: auto;
+ padding-inline: 2rem;
+ @media (width >= --theme(--breakpoint-sm)) {
+ max-width: none;
+ }
+ @media (width >= 1400px) {
+ max-width: 1400px;
+ }
+}
+
+/*
+ The default border color has changed to `currentcolor` in Tailwind CSS v4,
+ so we've added these compatibility styles to make sure everything still
+ looks the same as it did with Tailwind CSS v3.
+
+ If we ever want to remove these styles, we need to add an explicit border
+ color utility to any element that depends on these defaults.
+*/
+@layer base {
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: var(--color-gray-200, currentcolor);
}
}
@layer base {
:root {
- --background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(222.2 84% 4.9%);
+
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(222.2 84% 4.9%);
- --card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(222.2 84% 4.9%);
- --popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
+ --destructive: hsl(0 84.2% 60.2%);
- --primary: 222.2 47.4% 11.2%;
- --primary-foreground: 210 40% 98%;
+ --primary: hsl(222.2 47.4% 11.2%);
+ --primary-foreground: hsl(210 40% 98%);
- --secondary: 210 40% 96.1%;
- --secondary-foreground: 222.2 47.4% 11.2%;
+ --secondary: hsl(210 40% 96.1%);
+ --secondary-foreground: hsl(222.2 47.4% 11.2%);
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
+ --muted: hsl(210 40% 96.1%);
+ --muted-foreground: hsl(215.4 16.3% 46.9%);
- --accent: 210 40% 96.1%;
- --accent-foreground: 222.2 47.4% 11.2%;
+ --accent: hsl(210 40% 96.1%);
+ --accent-foreground: hsl(222.2 47.4% 11.2%);
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 210 40% 98%;
+ --destructive-foreground: hsl(210 40% 98%);
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 222.2 84% 4.9%;
+ --border: hsl(214.3 31.8% 91.4%);
+ --input: hsl(214.3 31.8% 91.4%);
+ --ring: hsl(222.2 84% 4.9%);
--radius: 0.5rem;
}
.dark {
- --background: 222.2 84% 4.9%;
- --foreground: 210 40% 98%;
+ --background: hsl(222.2 84% 4.9%);
+ --foreground: hsl(210 40% 98%);
- --card: 222.2 84% 4.9%;
- --card-foreground: 210 40% 98%;
+ --card: hsl(222.2 84% 4.9%);
+ --card-foreground: hsl(210 40% 98%);
- --popover: 222.2 84% 4.9%;
- --popover-foreground: 210 40% 98%;
+ --popover: hsl(222.2 84% 4.9%);
+ --popover-foreground: hsl(210 40% 98%);
- --primary: 210 40% 98%;
- --primary-foreground: 222.2 47.4% 11.2%;
+ --primary: hsl(210 40% 98%);
+ --primary-foreground: hsl(222.2 47.4% 11.2%);
- --secondary: 217.2 32.6% 17.5%;
- --secondary-foreground: 210 40% 98%;
+ --secondary: hsl(217.2 32.6% 17.5%);
+ --secondary-foreground: hsl(210 40% 98%);
- --muted: 217.2 32.6% 17.5%;
- --muted-foreground: 215 20.2% 65.1%;
+ --muted: hsl(217.2 32.6% 17.5%);
+ --muted-foreground: hsl(215 20.2% 65.1%);
- --accent: 217.2 32.6% 17.5%;
- --accent-foreground: 210 40% 98%;
+ --accent: hsl(217.2 32.6% 17.5%);
+ --accent-foreground: hsl(210 40% 98%);
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 210 40% 98%;
+ --destructive: hsl(0 62.8% 30.6%);
+ --destructive-foreground: hsl(210 40% 98%);
- --border: 217.2 32.6% 17.5%;
- --input: 217.2 32.6% 17.5%;
- --ring: 212.7 26.8% 83.9%;
+ --border: hsl(217.2 32.6% 17.5%);
+ --input: hsl(217.2 32.6% 17.5%);
+ --ring: hsl(212.7 26.8% 83.9%);
}
}
@@ -139,8 +173,8 @@ body {
justify-content: center;
border-radius: 9999px;
border-width: 4px;
- border-color: hsl(var(--background));
- background-color: hsl(var(--muted));
+ border-color: var(--background);
+ background-color: var(--muted);
text-align: center;
text-indent: -1px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
diff --git a/app/layout.tsx b/app/layout.tsx
index f966397..bc29447 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,7 +7,6 @@ import { SiteHeader } from "@/components/www/header";
import { SiteFooter } from "@/components/www/site-footer";
import { ThemeProvider } from "@/components/www/theme-provider";
import { cn } from "@/lib/utils";
-import { UserProvider } from "@auth0/nextjs-auth0/client";
const inter = Inter({ subsets: ["latin"] });
@@ -24,25 +23,23 @@ export default async function RootLayout({
}>) {
return (
-
-
+
-
-
- {children}
-
-
-
-
+
+ {children}
+
+
+