K
Kinde7mo ago
Tigerr

Redirect User Not Found to request access page

I have turned off self signup for a closed beta b2b saas app. We want to redirect people who try to login and get user not found to the request access screen. Is that possible?
5 Replies
onderay
onderay7mo ago
Not currently functionality we support, but love the susgestion and have asked the team to look into it.
Tigerr
TigerrOP7mo ago
is there an api response i can get from the nextjs login component so do the redirect myself? Or like if the user is not found, can i still use the getKindeSession or some equivalent to see that the user is not found and redirect them myself? Also thanks for answering on the weekends, is slack a better place for these kinds of questions?
onderay
onderay7mo ago
The below instructions could help you, but not 100% sure if you can redirect it to the request access page. Create an API route to get the Kinde session data:
// app/api/kindeSession/route.ts
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { NextResponse } from "next/server";

export async function GET() {
const { getUser, isAuthenticated } = getKindeServerSession();

if (!(await isAuthenticated())) {
return new Response("Unauthorized", { status: 401 });
}

const user = await getUser();
return NextResponse.json({ user });
}
// app/api/kindeSession/route.ts
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { NextResponse } from "next/server";

export async function GET() {
const { getUser, isAuthenticated } = getKindeServerSession();

if (!(await isAuthenticated())) {
return new Response("Unauthorized", { status: 401 });
}

const user = await getUser();
return NextResponse.json({ user });
}
Fetch the session data in your client component and handle the redirection:
// some client component
"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/router";

export default function ProtectedPage() {
const [user, setUser] = useState(null);
const [authStatus, setAuthStatus] = useState(null);
const router = useRouter();

useEffect(() => {
const getKindeSession = async () => {
const res = await fetch("/api/kindeSession");
if (res.status === 401) {
router.push("/api/auth/login");
} else {
const data = await res.json();
setUser(data.user);
setAuthStatus(true);
}
};

getKindeSession();
}, [router]);

if (!authStatus) {
return <div>Loading...</div>;
}

return <div>Protected content</div>;
}
// some client component
"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/router";

export default function ProtectedPage() {
const [user, setUser] = useState(null);
const [authStatus, setAuthStatus] = useState(null);
const router = useRouter();

useEffect(() => {
const getKindeSession = async () => {
const res = await fetch("/api/kindeSession");
if (res.status === 401) {
router.push("/api/auth/login");
} else {
const data = await res.json();
setUser(data.user);
setAuthStatus(true);
}
};

getKindeSession();
}, [router]);

if (!authStatus) {
return <div>Loading...</div>;
}

return <div>Protected content</div>;
}
In this example, the API route checks if the user is authenticated using getKindeServerSession. If the user is not authenticated, it returns a 401 status. The client component fetches this data and redirects the user to the login page if they are not authenticated. Here is perfectly fine, and it's our Monday morning for most of the team, so we are ready to help.
Peteswah
Peteswah7mo ago
Hey @Tigerr this should probably exist, I 'll see if I can add it to the auth flow by the end of the week The only way I can think of doing this right now would be to create a custom sign in screen and then check to see if a user with the email exists if not then send them to knock knock (request access), otherwise log them in
Tigerr
TigerrOP7mo ago
thanks that might be what i have to do
Want results from more Discord servers?
Add your server