9

I want to create basic Next.js HOC for authentication. I searched but I didn't figure it out.

I have an admin page in my Next.js app. I want to fetch from http://localhost:4000/user/me and that URL returns my user. If user data returns, component must be rendered. If data didn't return, I want to redirect to the /admin/login page.

I tried this code but that didn't work. How can I solve this issue? Also can I use useSWR instead of fetch?

const withAuth = (Component, { data }) => {
  if (!data) {
    return {
      redirect: {
        destination: "/admin/login",
      },
    };
  }
  return Component;
};

withAuth.getInitialProps = async () => {
  const response = await fetch("http://localhost:4000/user/me");
  const data = await response.json();
  return { data };
};

export default withAuth;
const AdminHome = () => {
  return ();
};
export default withAuth(AdminHome);
6
  • Does this answer your question: Creating a HOC (higher order component) for cookies in nextJS? Dec 14, 2021 at 16:48
  • Actually, i seen this before but i didn't figured out. Do you know how can I use that code in my example? Dec 14, 2021 at 16:54
  • Move both the fetch request and the redirect code into the higher-order function. Dec 14, 2021 at 16:55
  • i did but it didnt work Dec 14, 2021 at 16:58
  • You need to modify your code accordingly too to use the higher-order function on the getServerSideProps and not wrap the component itself. Dec 14, 2021 at 17:00

3 Answers 3

21

Server-side authentication

Based on the answer from Create a HOC (higher order component) for authentication in Next.js, you can create a re-usable higher-order function for the authentication logic.

If the user data isn't present it'll redirect to the login page. Otherwise, the function will continue on to call the wrapped getServerSideProps function, and will return the merged user data with the resulting props from the page.

export function withAuth(gssp) {
    return async (context) => {
        const response = await fetch('http://localhost:4000/user/me');
        const data = await response.json();
        
        if (!data) {
            return {
                redirect: {
                    destination: '/admin/login'
                }
            };
        }

        const gsspData = await gssp(context); // Run `getServerSideProps` to get page-specific data
        
        // Pass page-specific props along with user data from `withAuth` to component
        return {
            props: {
                ...gsspData.props,
                data
            }
        };
    }
}

You can then use it on the AdminHome page to wrap the getServerSideProps function.

const AdminHome = ({ data }) => {
    return ();
};

export const getServerSideProps = withAuth(context => {
    // Your normal `getServerSideProps` code here
    return { props: {} };
});

export default AdminHome;

Client-side authentication

If you'd rather have the authentication done on the client, you can create a higher-order component that wraps the component you want to protect.

const withAuth = (Component) => {
    const AuthenticatedComponent = () => {
        const router = useRouter();
        const [data, setData] = useState()

        useEffect(() => {
            const getUser = async () => {
                const response = await fetch('http://localhost:4000/user/me');
                const userData = await response.json();
                if (!userData) {
                    router.push('/admin/login');
                } else {
                    setData(userData);
                }  
            };
            getUser();
        }, []);

        return !!data ? <Component data={data} /> : null; // Render whatever you want while the authentication occurs
    };

    return AuthenticatedComponent;
};

You can then use it to wrap the AdminHome component directly.

const AdminHome = () => {
  return ();
};

export default withAuth(AdminHome);
15
  • 2
    Firstly, thank you so much. Thats really nice. I'm using client side rendering in admin component. How can i wrap this code using withAuth() For example: const posts = useSWR("http://localhost:4000/post", (...args) => fetch(...args).then((res) => res.json()) ); Basically i want to protect whole admin component Jan 11, 2022 at 8:51
  • In my example, withAuth is meant to run on the server as it's a wrapper for getServerSideProps - you can't use useSWR on server-side code. It's a React hook and can only be used on the client-side. Jan 11, 2022 at 8:53
  • 1
    If you don't want the user to reach the page, wouldn't my approach done on the server-side be more suitable then? Or is there a reason you need the auth to happen on the client? If you do it client-side, the page will load and then the user will be redirected. Jan 11, 2022 at 9:01
  • 1
    Wow, it's work. Thank you so much this really help to me Jan 11, 2022 at 10:08
  • 1
    @ßiansorÅ.Ålmerol No, it's either one or the other. It depends on your requirements. Jul 6 at 7:18
3

If you're looking for the typescript version:

withAuth.ts

export function withAuth(gssp: GetServerSideProps): GetServerSideProps {
  return async (context) => {
    const { user } = (await getSession(context.req, context.res)) || {};

    if (!user) {
      return {
        redirect: { statusCode: 302, destination: "/" },
      };
    }

    const gsspData = await gssp(context);

    if (!("props" in gsspData)) {
      throw new Error("invalid getSSP result");
    }

    return {
      props: {
        ...gsspData.props,
        user,
      },
    };
  };
}

Home.tsx

export const getServerSideProps = withAuth(async (context) => {
  return { props: {} };
});
0

I've created a HOC for protected route:

import { RootState } from "@/redux/features/store";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { useSelector } from "react-redux";

const withAuth = <P extends object>(
  WrappedComponent: React.ComponentType<P>
) => {
  const ComponentWithAuth = (props: P) => {
    const router = useRouter();
    const isAuthenticated = useSelector(
      (state: RootState) => state.login.isAuthenticated
    );

    useEffect(() => {
      // Perform authentication check here

      if (!isAuthenticated) {`enter code here`
        router.push("/login");
      }
    }, []);

    return <WrappedComponent {...props} />;
  };

  return ComponentWithAuth;
};

export default withAuth;
and I WRAPPED in app.tsx

import * as React from "react";
import type { AppProps } from "next/app";
import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
import { Provider } from "react-redux";
import { store } from "../redux/features/store";
import defaultTheme from "../assets/styles/theme/lightThemeOptions";
import "../assets/styles/globalStyles.scss";
import "../assets/styles/iconStyles.scss";
import { Notification } from "../Toastmessage/Snackbar";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";
import Head from "next/head";
import ProtectedRoute from "@/components/ProtectedRoute/protectedroute";
import withAuth from "./ProtectedRoute";

const lightTheme = createTheme(defaultTheme);

const MyApp = ({ Component, pageProps }: AppProps) => {
  let persistor = persistStore(store);

  return (
    <>
      <Head>
        <title>Upshot.ai</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/fav-icon.png" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={null}>
          {() => (
            <ThemeProvider theme={lightTheme}>
            <CssBaseline/>
            {/* <ProtectedRoute> */}
              <Component {...pageProps} />
              {/* </ProtectedRoute> */}
              <Notification />
            </ThemeProvider>
           )}
        </PersistGate> 
      </Provider>
    </>
  );
};

export default withAuth(MyApp);

But my UI is displaying white screen.

2
  • how to do @@juliomalves
    – Sai
    Mar 29 at 6:34
  • you can't on answer and question.
    – devpolo
    Apr 3 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.