Skip to content

docs: redesign Next.js quickstart sample app UI #862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rengarajan01 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: redesign Next.js quickstart sample app UI #862

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 89 additions & 81 deletions main/docs/quickstart/webapp/nextjs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,9 +247,9 @@ APP_BASE_URL=http://localhost:3000`;
return (
<a
href="/auth/login"
className="w-full text-center inline-block px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white font-medium rounded-2xl text-[15px] tracking-[-0.01em] transition-all duration-200 hover:shadow-lg hover:shadow-blue-600/30 hover:-translate-y-px active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
className="w-full text-center inline-block px-6 py-3 bg-gradient-to-b from-[#2d2d42] to-[#161620] hover:opacity-90 text-white font-medium rounded-full text-[14px] transition-opacity"
>
Sign in with Auth0
Login
</a>
);
}
Expand All @@ -262,62 +262,53 @@ APP_BASE_URL=http://localhost:3000`;
return (
<a
href="/auth/logout"
className="w-full text-center inline-block px-6 py-3 bg-white/[0.04] hover:bg-red-500/10 text-slate-300 hover:text-red-400 font-medium rounded-2xl text-[15px] tracking-[-0.01em] border border-white/[0.08] hover:border-red-500/20 transition-all duration-200 focus:outline-none"
className="w-full text-center inline-block px-6 py-3 bg-[#f0f0f0] hover:bg-gray-200 text-gray-600 font-medium rounded-full text-[14px] transition-colors"
>
Sign out
Logout
</a>
);
}
```

```typescript src/components/Profile.tsx expandable lines
```typescript src/components/Profile.tsx lines
"use client";

import { useUser } from "@auth0/nextjs-auth0/client";

const FALLBACK_AVATAR = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234f46e5'/%3E%3Cpath d='M50 45c7.5 0 13.64-6.14 13.64-13.64S57.5 17.72 50 17.72s-13.64 6.14-13.64 13.64S42.5 45 50 45zm0 6.82c-9.09 0-27.28 4.56-27.28 13.64v3.41c0 1.88 1.53 3.41 3.41 3.41h47.74c1.88 0 3.41-1.53 3.41-3.41v-3.41c0-9.08-18.19-13.64-27.28-13.64z' fill='%23fff'/%3E%3C/svg%3E`;
function getInitials(name?: string | null, email?: string | null): string {
if (name) {
const parts = name.trim().split(" ");
return parts.length >= 2
? `${parts[0][0]}${parts[1][0]}`.toUpperCase()
: parts[0].slice(0, 2).toUpperCase();
}
if (email) return email.slice(0, 2).toUpperCase();
return "U";
}

export default function Profile() {
const { user, isLoading } = useUser();

if (isLoading) {
return (
<div className="flex items-center gap-3 w-full bg-white/[0.03] rounded-2xl p-4 border border-white/[0.06]">
<div className="w-12 h-12 rounded-full bg-white/10 animate-pulse shrink-0" />
<div className="flex-1 space-y-2">
<div className="h-3.5 bg-white/10 rounded-full animate-pulse w-2/3" />
<div className="h-3 bg-white/10 rounded-full animate-pulse w-1/2" />
</div>
</div>
);
}

if (isLoading) return <p className="text-xs text-gray-500">Loading...</p>;
if (!user) return null;

return (
<div className="flex items-center gap-4 w-full bg-white/[0.03] rounded-2xl p-4 border border-white/[0.06]">
<div className="relative shrink-0">
<div className="p-[2px] rounded-full bg-gradient-to-br from-blue-400 to-violet-500">
<img
src={user.picture || FALLBACK_AVATAR}
alt={user.name || "User"}
referrerPolicy="no-referrer"
className="w-11 h-11 rounded-full object-cover bg-slate-900 block"
onError={(e) => {
(e.target as HTMLImageElement).src = FALLBACK_AVATAR;
}}
/>
</div>
<span className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-400 rounded-full border-2 border-[#060812]" />
<>
<div className="flex items-center gap-2 text-green-500 text-[13px] font-medium">
<span className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center shrink-0">
<svg width="10" height="8" viewBox="0 0 10 8" fill="none">
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</span>
Successfully authenticated
</div>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-semibold truncate">{user.name}</p>
<p className="text-slate-400 text-xs truncate mt-0.5">{user.email}</p>
<div className="flex items-center gap-2 bg-gray-100 rounded-full py-1.5 pl-1.5 pr-4 text-[12px] text-gray-700 max-w-full">
<span className="w-7 h-7 bg-gradient-to-b from-[#2d2d42] to-[#161620] rounded-full flex items-center justify-center text-white text-[10px] font-semibold shrink-0">
{getInitials(user.name, user.email)}
</span>
<span className="truncate">{user.email}</span>
</div>
<span className="shrink-0 text-xs px-2 py-0.5 rounded-full bg-green-400/10 text-green-400 border border-green-400/20 font-medium">
Active
</span>
</div>
</>
);
}
```
Expand All @@ -327,7 +318,7 @@ APP_BASE_URL=http://localhost:3000`;
<Step title="Update your main page" stepNumber={8}>
Replace `src/app/page.tsx` with:

```typescript src/app/page.tsx expandable lines
```typescript src/app/page.tsx lines
import { auth0 } from "@/lib/auth0";
import LoginButton from "@/components/LoginButton";
import LogoutButton from "@/components/LogoutButton";
Expand All @@ -338,47 +329,64 @@ APP_BASE_URL=http://localhost:3000`;
const user = session?.user;

return (
<main className="min-h-screen bg-[#060812] flex items-center justify-center px-6 py-12 relative overflow-hidden">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] md:w-[900px] h-[300px] md:h-[450px] bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[400px] md:w-[600px] h-[200px] md:h-[300px] bg-violet-600/15 rounded-full blur-3xl pointer-events-none" />

<div className="relative w-full max-w-sm md:max-w-md">
<div className="bg-white/[0.04] backdrop-blur-2xl border border-white/[0.08] rounded-3xl shadow-2xl shadow-black/60 overflow-hidden">
<div className="h-px bg-gradient-to-r from-transparent via-blue-500/60 to-transparent" />

<div className="px-8 md:px-10 pt-9 md:pt-10 pb-9 md:pb-10 flex flex-col items-center gap-6 md:gap-7">
<img
src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png"
alt="Auth0"
className="h-6 md:h-7"
/>

<div className="text-center">
<h1 className="text-xl md:text-2xl font-semibold text-white tracking-[-0.02em]">
Next.js + Auth0
</h1>
<p className="text-slate-500 text-sm md:text-[15px] mt-1.5">
Secure, simple authentication
</p>
</div>

<div className="w-full h-px bg-white/[0.06]" />

{user ? (
<div className="flex flex-col items-center gap-4 w-full">
<Profile />
<LogoutButton />
</div>
) : (
<div className="flex flex-col items-center gap-5 w-full">
<p className="text-slate-400 text-sm md:text-[15px] text-center leading-relaxed tracking-[-0.01em]">
Sign in to access your account and protected content.
</p>
<LoginButton />
</div>
)}
</div>
</div>
<main className="min-h-screen bg-[#efefef] flex flex-col items-center justify-center gap-4 px-6 py-12">
<div className="bg-white rounded-[28px] shadow-[0_4px_32px_rgba(0,0,0,0.08)] px-12 py-14 flex flex-col items-center gap-4 w-[360px]">
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg" className="mb-1">
<g filter="url(#filter0_di)">
<rect x="2" y="2" width="64" height="64" rx="16" fill="url(#paint0_linear)"/>
<rect x="2.5" y="2.5" width="63" height="63" rx="15.5" stroke="#252525"/>
<path d="M34.0002 18C25.1572 18 18 25.1669 18 34C18 42.8432 25.1672 50 34.0002 50C42.8333 50 50 42.8331 50 34C50 25.1669 42.8433 18 34.0002 18ZM43.9172 43.8971C43.9172 43.9071 43.9069 43.9072 43.9069 43.9172C43.9069 43.9172 43.8969 43.9272 43.8868 43.9272C43.144 44.65 41.9796 44.7303 41.0662 44.2585L40.0228 43.7265C36.2487 41.7792 31.7619 41.7792 27.9777 43.7265L26.9338 44.2585C26.0103 44.7303 24.8459 44.65 24.1132 43.9272C24.1132 43.9272 24.1031 43.9172 24.0931 43.9172C24.0931 43.9172 24.0828 43.9071 24.0828 43.8971C23.3601 43.1543 23.2797 41.9899 23.7515 41.0765L24.2837 40.0326C26.231 36.2585 26.231 31.7717 24.2837 27.9975L23.7515 26.9536C23.2797 26.0302 23.3601 24.8657 24.0828 24.133C24.0828 24.1229 24.0931 24.123 24.0931 24.123C24.0931 24.123 24.1031 24.1129 24.1132 24.1129C24.856 23.3902 26.0204 23.3099 26.9338 23.7817L27.9777 24.3137C31.7518 26.261 36.2386 26.261 40.0228 24.3137L41.0662 23.7817C41.9897 23.3099 43.1541 23.3902 43.8868 24.1129C43.8868 24.1129 43.8969 24.123 43.9069 24.123L43.9172 24.133C44.6399 24.8758 44.7203 26.0402 44.2485 26.9536L43.7163 27.9975C41.769 31.7717 41.769 36.2585 43.7163 40.0326L44.2485 41.0765C44.7203 41.9899 44.6499 43.1543 43.9172 43.8971Z" fill="white"/>
</g>
<defs>
<filter id="filter0_di" x="0" y="0" width="68" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
<feOffset/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.117647 0 0 0 0 0.129412 0 0 0 0 0.164706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<linearGradient id="paint0_linear" x1="34" y1="2" x2="34" y2="66" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stopColor="#677190"/>
</linearGradient>
</defs>
</svg>

{user ? (
<>
<h1 className="text-[17px] font-bold text-gray-900 tracking-tight">Your account</h1>
<div className="w-full h-px bg-gray-100" />
<Profile />
<LogoutButton />
</>
) : (
<>
<h1 className="text-[17px] font-bold text-gray-900 tracking-tight">Welcome to Sample0</h1>
<p className="text-[13px] text-gray-400 text-center leading-relaxed -mt-2">
Get started by logging in to your account
</p>
<div className="h-3" />
<LoginButton />
</>
)}
</div>

<div className="flex items-center gap-1.5 text-[11px] text-gray-400">
<span>Powered by</span>
<img
src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-onlight.svg"
alt="Auth0"
className="h-3 opacity-40"
/>
</div>
</main>
);
Expand Down
Loading