From 49ed33730429faf35a66c923114e20159703e4b0 Mon Sep 17 00:00:00 2001 From: Abhisek Datta Date: Thu, 19 Dec 2024 16:55:46 +0530 Subject: [PATCH] fix: Auth0 Unverified Email Handling (#37) * feat: Add error handling for authentication and email verification flow * feat: Refactor AuthError component to use Suspense for loading state * refactor: Migrate verify-email page within auth --------- Co-authored-by: Kunaldevxxx --- src/app/api/auth/[auth0]/route.ts | 29 ++++++++++- src/app/auth/error/page.tsx | 37 ++++++++++++++ src/app/auth/verify-email/page.tsx | 80 ++++++++++++++++++++++++++++++ 3 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 src/app/auth/error/page.tsx create mode 100644 src/app/auth/verify-email/page.tsx diff --git a/src/app/api/auth/[auth0]/route.ts b/src/app/api/auth/[auth0]/route.ts index 9662990..995c885 100644 --- a/src/app/api/auth/[auth0]/route.ts +++ b/src/app/api/auth/[auth0]/route.ts @@ -1,5 +1,5 @@ import { handleAuth, handleLogin } from '@auth0/nextjs-auth0'; - +import { NextRequest, NextResponse } from "next/server"; // export Auth0's default handleAuth with custom action for // sign-up to render the sign-up screen by default export const GET = handleAuth({ @@ -8,9 +8,34 @@ export const GET = handleAuth({ screen_hint: 'signup' }, }), + login: handleLogin({ authorizationParams: { scope: 'openid profile email offline_access', }, }), -}) + + // https://github.com/SuhravHussen/UmmahrChintah/blob/bb79e4f97c782ce2572f28afa72c17dad9469ed8/client/app/api/auth/%5Bauth0%5D/route.ts + onError: async (req: NextRequest) => { + const url = new URL(req.url); + const errorType = url.searchParams.get("error"); + const errorDescription = url.searchParams.get("error_description") || ""; + + if ( + errorType === "access_denied" && + errorDescription?.includes("verify your email") + ) { + return NextResponse.redirect( + new URL(`/auth/verify-email`, process.env.NEXT_PUBLIC_URL || req.url) + ); + } + + return NextResponse.redirect( + new URL( + `/auth/error?message=${encodeURIComponent(errorDescription)}`, + process.env.NEXT_PUBLIC_URL || req.url + ) + ); + }, +}); + diff --git a/src/app/auth/error/page.tsx b/src/app/auth/error/page.tsx new file mode 100644 index 0000000..e72d950 --- /dev/null +++ b/src/app/auth/error/page.tsx @@ -0,0 +1,37 @@ +'use client' + +import { useSearchParams } from 'next/navigation' +import Link from 'next/link' +import { Suspense } from 'react' + +function AuthErrorComponent() { + const searchParams = useSearchParams() + const errorMessage = searchParams?.get('message') || 'An unknown error occurred' + + return ( +
+
+
+

Authentication Error

+
+

{decodeURIComponent(errorMessage)}

+
+ + Return to Sign In + +
+
+
+ ) +} + +export default function AuthError() { + return ( + Loading...}> + + + ) +} diff --git a/src/app/auth/verify-email/page.tsx b/src/app/auth/verify-email/page.tsx new file mode 100644 index 0000000..5a1970f --- /dev/null +++ b/src/app/auth/verify-email/page.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { Mail, ArrowRight } from "lucide-react"; + +export default function Page() { + return ( +
+
+
+ {/* Icon */} +
+ +
+ + {/* Title and Description */} +
+

+ Verify your email +

+

+ We have sent a verification link to the email address you provided. Please check your inbox to proceed. +

+
+ + {/* Steps */} +
+ {[ + "Open your email inbox", + "Click the verification link we sent you", + "Return here to continue", + ].map((text, index) => ( +
+
+ {index + 1} +
+

{text}

+
+ ))} +
+ + {/* Divider */} +
+
+
+
+
+ Already verified? +
+
+ + {/* Actions */} +
+ + + +
+ + {/* Help text */} +

+ Didnt receive the email? Check your spam folder or try to login + again to resend the verification email. +

+
+
+
+ ); +}