Next.js Discord

Discord Forum

Where should I check if user created profile or not?

Unanswered
Rex posted this in #help-forum
Open in Discord
RexOP
I am using next-auth with the next js. After the user registers he is redirected to the "profile" page. Let say I don't user to access any route unless he creates the 'proifle" on the prodile route.
How should I do this?
Should I check if the user created the profile or not in middleware.js (don't know how tho) or should I do like this 
// ProfileRoute.js
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { checkUserProfile } from '../utils/auth'; // Implement this function

const ProfileRoute = ({ children }) => {
  const router = useRouter();

  useEffect(() => {
    const redirectToProfile = async () => {
      const hasProfile = await checkUserProfile(); // Implement this function

      if (!hasProfile) {
        router.push('/register/profile');
      }
    };

    redirectToProfile();
  }, [router]);

  return <>{children}</>;
};

export default ProfileRoute;


// pages/some-protected-page.js
import ProfileRoute from '../components/ProfileRoute';

const SomeProtectedPage = () => {
  return (
    <ProfileRoute>
      {/* Your protected page content */}
    </ProfileRoute>
  );
};

export default SomeProtectedPage;

15 Replies

RexOP
What is the best possible way to do this?
Eric Burel
Middleware = protecting the route access, completely
this is needed if the route statically renders paid/private content for instance
The alternative is to do the check in a React Server Component, either a layout or the page
it's similar except that it's easier to access a database from an RSC rather than from a middleware
Finally, you can let the user access the page, and stick to client-side verifications only, but instead protect your API endpoints: unauthenticated user could potentially see the page or access the js code for the page, but they won't have any relevant data ("secure data not pages" idea)
@Eric Burel Middleware = protecting the route access, completely
RexOP
I understand that you want me to do the check in the server component
I tried the above profile route approach but there a home page flash before user is redirected to the "profile" route
Then I tried doing it in the root layout but it goes in to loop and that makes sense 
import Footer from "./components/footer/footer";
import Header from "./components/header/header";
import "@/app/globals.css";
import HomeHeader from "./components/header/homeHeader";
import { AuthProvider } from "../context/AuthProvider";
import { getCurrentUser } from "@/lib/services/getCurrentUser";
import ProfileRoute from "./components/Routes/ProfileRoute";
import { redirect } from "next/navigation";

export default async function RootLayout({ children }) {
  const user = await getCurrentUser();
  console.log("USER: ", user);
  const profile = false;
  if (!profile) {
    redirect("/register/profile");
  }

  return (
    <html lang="en" className="overflow-x-hidden">
      <body>
        <AuthProvider>
          {user ? <Header /> : <HomeHeader />}
          {children}
          <Footer />
        </AuthProvider>
      </body>
    </html>
  );
}

How can I do it?
I don't want the user with no profile to be abel to see the page because displayed is all personal
why do you set profile to false?
you could just redirect if "user" is falsy
RexOP
Let me explain
User comes on my website then registers using email + passsword then redireected to "register/profile" route where he/she eneter all personal details eg name, gender etc
at this points users can click on home in nav and can go to home but I don't want to giev accces to that since he hasn't created a profile
he is registered tho
I need name, age detail becasue that will be displayed on home