CODEWITHSUNDEEP
reactjsauthenticationcookiesnext.js
aolivera
aolivera

Reputation: 560

Next JS - Handling getInitialProps on _app.js in SSR vs CSR

I am trying to create a Next JS application that handles the authentication and initial routing inside getInitialProps. I discovered this method can be executed either in the server or on the client. My approach so far it's to have 2 different handlers based on detecting if I am in executing in the server checking for the presence of the req attribute inside of ctx. This does the trick but doesn't feel like is the right way of doing. Can somebody, please, tell me if there is a cleaner way. All authentication is handled in a separate subdomain, so I just need to redirect to the auth subdomain if there is no cookie or auth request fails for some other reason.

import "../../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
    let cookie, user;

    let ctx = appContext.ctx;

    //Check if I am in the server.
    if (ctx.req) {
        cookie = ctx.req.headers.cookie
        //Do auth request.

        //Redirect base on user properties
        // handle redirects using res object
        ctx.res.writeHead(302, { Location: "/crear-cuenta"});
         
    }  else {
        cookie = window.document.cookie;
        //Do auth request.
        //Redirect base on user properties
        //Do redirects using client side methods (useRouter hook, location.replace)???
    }

    //Return pageProps to the page with the authenticted user information.
    return { pageProps: { user: user } };
  
};

export default MyApp;

Upvotes: 0

Views: 3542

Answers (1)

Hooman
Hooman

Reputation: 1925

I think your code is clean enough. Of course you still can maintain it.

My suggestion would be as the followings:

MyApp.getInitialProps = async (appContext) => {

in this line you can use object destructuring technique to get the context straightforward:

MyApp.getInitialProps = async ({ ctx }) => {

then you won't need this line for example anymore : let ctx = appContext.ctx;

The most important part of your code which can be cleaned up by the way is the area that you have written your auth request twice in an if/else condition. I would suggest you to implement that part like this:

const cookie = ctx.req ? ctx.req.headers.cookie : window.document.cookie;

Although I would try to keep everything in getInitialProps on server side, In that case I make a small change to get the cookie as following and process it in server-side only.

const cookie = cookie.parse(ctx.req ? ctx.req.headers.cookie || "" : undefined);

Note that: I'm using a cookie parser which u can install the package yourself as well. (npm install cookie)

if you need to do an extra check on your cookie at client side, I will do that in componentdidmount or in case you are using react hooks in useEffect. But it is not necessary.

Now you can implement //Do auth request once, which will cause cleaner code and of course to reduce unnecessary repetition.

Upvotes: 2

Related Questions