diff --git a/app/api/auth/[[...path]]/route.ts b/app/api/auth/[[...path]]/route.ts
new file mode 100644
index 0000000..6a352fa
--- /dev/null
+++ b/app/api/auth/[[...path]]/route.ts
@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+import SuperTokens from "supertokens-node";
+import { backendConfig } from "@/lib/supertokens/backendConfig";
+import { getAppDirRequestHandler } from "supertokens-node/nextjs";
+
+SuperTokens.init(backendConfig());
+
+const handleRequest = getAppDirRequestHandler(NextResponse);
+
+export async function GET(request: NextRequest) {
+ const response = await handleRequest(request);
+ return response;
+}
+
+export async function POST(request: NextRequest) {
+ const response = await handleRequest(request);
+ return response;
+}
+
+export async function DELETE(request: NextRequest) {
+ const response = await handleRequest(request);
+ return response;
+}
+
+export async function PUT(request: NextRequest) {
+ const response = await handleRequest(request);
+ return response;
+}
+
+export async function PATCH(request: NextRequest) {
+ const response = await handleRequest(request);
+ return response;
+}
+
+export async function HEAD(request: NextRequest) {
+ const response = await handleRequest(request);
+ return response;
+}
diff --git a/app/auth/supertokens-page.tsx b/app/auth/supertokens-page.tsx
new file mode 100644
index 0000000..f61b0ee
--- /dev/null
+++ b/app/auth/supertokens-page.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
+
+// Dynamically import to avoid SSR issues
+const SuperTokensComponentNoSSR = dynamic(
+ () => import("@/app/components/SuperTokensAuthComponent"),
+ { ssr: false }
+);
+
+export default function AuthPage() {
+ return (
+
+
+
+ );
+}
diff --git a/app/components/SuperTokensAuthComponent.tsx b/app/components/SuperTokensAuthComponent.tsx
new file mode 100644
index 0000000..0b98ded
--- /dev/null
+++ b/app/components/SuperTokensAuthComponent.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { redirectToAuth } from "supertokens-auth-react";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { canHandleRoute, getRoutingComponent } from "supertokens-auth-react/ui";
+
+export default function SuperTokensAuthComponent() {
+ useEffect(() => {
+ if (!canHandleRoute([ThirdPartyEmailPasswordPreBuiltUI])) {
+ redirectToAuth();
+ }
+ }, []);
+
+ if (canHandleRoute([ThirdPartyEmailPasswordPreBuiltUI])) {
+ return getRoutingComponent([ThirdPartyEmailPasswordPreBuiltUI]);
+ }
+
+ return Loading...
;
+}
diff --git a/app/components/SuperTokensProvider.tsx b/app/components/SuperTokensProvider.tsx
new file mode 100644
index 0000000..0fcaca0
--- /dev/null
+++ b/app/components/SuperTokensProvider.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+import { useEffect } from "react";
+import SuperTokensReact from "supertokens-auth-react";
+import { frontendConfig } from "@/lib/supertokens/frontendConfig";
+
+export const SuperTokensProvider: React.FC> = ({
+ children,
+}) => {
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ SuperTokensReact.init(frontendConfig());
+ }
+ }, []);
+
+ return <>{children};
+};
diff --git a/app/layout.tsx b/app/layout.tsx
index e4eb6ba..c168cdc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/sonner";
+import { SuperTokensProvider } from "./components/SuperTokensProvider";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -28,8 +29,10 @@ export default function RootLayout({
- {children}
-
+
+ {children}
+
+