How to use getServerSideProps in a HOC for authentication

[jordymeow]

Hello,

There are examples of how to perform authentification using cookies for one page (like the example with-cookie-auth), however, in the real world, when we use auth we also use it on many different pages.

I tried to play with the _app to catch getServiceSideProps (but that's not possible) or even the getInitialProps (never get called) with today's release of NextJS, but can't find any solution.

Ideally, I would love to do this in a HOC. I would use it only for my pages requiring authentification. That HOC would also update my global state. My problem is that I can find a way to make a HOC on which the getServiceSideProps get called. Is there a way?

Thanks a lot :)

[josiahwiebe]

I'm currently testing an implementation something like this. Would actually love some feedback on it because it might be a terrible idea, but it does seem to work for me.

I didn't use getInitialProps or getServerSideProps as I wanted to be able to statically export pages, but the downside is that I can't use the new getStaticProps methods with this implementation (yet).

pages/_app.js

import Router from 'next/router'
import { useState, useEffect, createContext } from 'react'
import cookie from 'js-cookie'
import { trigger, mutate } from 'swr'

export const UserContext = createContext()

const App = ({ Component, pageProps }) => {
   const [user, setUser] = useState()
   const [token, setToken] = useState()

   // get the token from the cookie
   const cookieToken = cookie.get('token')

   // login function to be called on a login page
   const login = ({ user, token }) => {
      // save the token from the login response in a cookie
      cookie.set('token', token, { expires: 14 })
      // save the userId from the login response in a cookie
      cookie.set('userId', user.id, { expires: 14 })
      setUser(user)
      setToken(token)
      trigger(`/api/users/${user.id}`)
   }

   const logout = () => {
      setUser(null)
      cookie.remove(token)
      // invalidate the user with swr
      mutate(`/api/users/${user.id}`, {}, false)
      Router.push('/login')
   }

   useEffect(() => {
      if (cookieToken) setToken(cookieToken)
   }, [])

   return (
      <UserContext.Provider
         value={{
            user: user,
            token: cookieToken || token,
            login: login,
            logout: logout,
            setUser: setUser,
         }}>
         <Component {...pageProps} />
      </UserContext.Provider>
   )
}

export default App

hocs/withUser.js

import { useEffect, useState } from 'react'
import cookie from 'js-cookie'
import useSWR from 'swr'
import Router from 'next/router'
import { useAuth } from '../hooks/useAuth'

function getRedirectTo() {
  if (typeof window !== 'undefined' && window.location) {
    return window.location
  }
  return {}
}

export const withUser = WrappedComponent => {
   const Wrapper = props => {
      const { setUser } = useAuth()
      const [token, setToken] = useState()
      const [userId, setUserId] = useState()
      const [shouldFetchUser, setShouldFetchUser] = useState(false)

      const cookieUserId = cookie.get('userId')
      const cookieToken = cookie.get('token')
      
      const fetchWithToken = (url, token) => {
        return fetch(url, {
          method: 'GET',
          headers: { 'x-access-token': token },
        }).then(res => res.json())
      }

      const { data: fetchedUser } = useSWR(shouldFetchUser ? [`/api/users/${userId}`, token] : null, fetchWithToken)

      useEffect(() => {
         const redir = getRedirectTo()
         if (cookieToken && cookieUserId) {
           setToken(cookieToken)
           setUserId(cookieUserId)
           setShouldGetUser(true)
         } else {
           Router.replace(`/login?r=${redir.pathname + encodeURIComponent(redir.search)}`, '/login', { shallow: true })
         }
      }, [shouldGetUser])

      useEffect(() => {
         if (fetchedUser) {
           setUser(fetchedUser)
           setRoles(fetchedUser.roles)
         }
       }, [fetchedUser])

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

hooks/useAuth

import { useContext } from 'react'
import { UserContext } from '../pages/_app'

export const useAuth = () => {
   const { user, token, login, logout, setUser } = useContext(UserContext)
   return { user, token, login, logout, setUser }
}

Now to implement it on an actual page, I wrap the page with the withUser HOC and get the user using the useAuth hook.

pages/profile.js

import { withUser } from '../hocs/withUser'
import { useAuth } from '../hooks/useAuth'

const Profile = () => {
   const { user } = useAuth()
   return user && (
      <div>
         <h1>Hello, {user.name}</h1>
      </div>
   )
}

export default withUser(Profile)

[saeedPadyab]

I'm currently testing an implementation something like this. Would actually love some feedback on it because it might be a terrible idea, but it does seem to work for me.

I didn't use getInitialProps or getServerSideProps as I wanted to be able to statically export pages, but the downside is that I can't use the new getStaticProps methods with this implementation (yet).

pages/_app.js

import Router from 'next/router'
import { useState, useEffect, createContext } from 'react'
import cookie from 'js-cookie'
import { trigger, mutate } from 'swr'

export const UserContext = createContext()

const App = ({ Component, pageProps }) => {
   const [user, setUser] = useState()
   const [token, setToken] = useState()

   // get the token from the cookie
   const cookieToken = cookie.get('token')

   // login function to be called on a login page
   const login = ({ user, token }) => {
      // save the token from the login response in a cookie
      cookie.set('token', token, { expires: 14 })
      // save the userId from the login response in a cookie
      cookie.set('userId', user.id, { expires: 14 })
      setUser(user)
      setToken(token)
      trigger(`/api/users/${user.id}`)
   }

   const logout = () => {
      setUser(null)
      cookie.remove(token)
      // invalidate the user with swr
      mutate(`/api/users/${user.id}`, {}, false)
      Router.push('/login')
   }

   useEffect(() => {
      if (cookieToken) setToken(cookieToken)
   }, [])

   return (
      <UserContext.Provider
         value={{
            user: user,
            token: cookieToken || token,
            login: login,
            logout: logout,
            setUser: setUser,
         }}>
         <Component {...pageProps} />
      </UserContext.Provider>
   )
}

export default App

hocs/withUser.js

import { useEffect, useState } from 'react'
import cookie from 'js-cookie'
import useSWR from 'swr'
import Router from 'next/router'
import { useAuth } from '../hooks/useAuth'

function getRedirectTo() {
  if (typeof window !== 'undefined' && window.location) {
    return window.location
  }
  return {}
}

export const withUser = WrappedComponent => {
   const Wrapper = props => {
      const { setUser } = useAuth()
      const [token, setToken] = useState()
      const [userId, setUserId] = useState()
      const [shouldFetchUser, setShouldFetchUser] = useState(false)

      const cookieUserId = cookie.get('userId')
      const cookieToken = cookie.get('token')
      
      const fetchWithToken = (url, token) => {
        return fetch(url, {
          method: 'GET',
          headers: { 'x-access-token': token },
        }).then(res => res.json())
      }

      const { data: fetchedUser } = useSWR(shouldFetchUser ? [`/api/users/${userId}`, token] : null, fetchWithToken)

      useEffect(() => {
         const redir = getRedirectTo()
         if (cookieToken && cookieUserId) {
           setToken(cookieToken)
           setUserId(cookieUserId)
           setShouldGetUser(true)
         } else {
           Router.replace(`/login?r=${redir.pathname + encodeURIComponent(redir.search)}`, '/login', { shallow: true })
         }
      }, [shouldGetUser])

      useEffect(() => {
         if (fetchedUser) {
           setUser(fetchedUser)
           setRoles(fetchedUser.roles)
         }
       }, [fetchedUser])

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

hooks/useAuth

import { useContext } from 'react'
import { UserContext } from '../pages/_app'

export const useAuth = () => {
   const { user, token, login, logout, setUser } = useContext(UserContext)
   return { user, token, login, logout, setUser }
}

Now to implement it on an actual page, I wrap the page with the withUser HOC and get the user using the useAuth hook.

pages/profile.js

import { withUser } from '../hocs/withUser'
import { useAuth } from '../hooks/useAuth'

const Profile = () => {
   const { user } = useAuth()
   return user && (
      <div>
         <h1>Hello, {user.name}</h1>
      </div>
   )
}

export default withUser(Profile)

Hey @josiahwiebe good solution for authentication. does it only run in client side?

[AntonioRChagoya]

@saeedPadyab I don't think this is a good solution, it is getting the cookie token directly from the browser, which means the cookie is not httponly which may lead to XFS attacks.

Can someone confirm that? not sure neither

[bryanmylee]

@AntonioRChagoya I think that as long as the token is something like a JWT that's verified on the backend, it should be fine.

[jordymeow]

I am using something similar, with a global context. It works quite well for me. Here it is:

import React, { useEffect } from 'react'
import Cookies from "universal-cookie";

import useGlobalState from './context';
import { getAccount } from '../libs/requests';

const withAuth = (WrappedComponent) => {
  
  const FuncComponent = ({ children, ...props }) => {
    const { user, setUser } = useGlobalState(); 

    useEffect(() => {
      if (!user && props.user && props.account) 
        setUser(props.user, props.account);
    });

    return (<WrappedComponent {...props}>{children}</WrappedComponent>);
  };

  FuncComponent.getInitialProps = async (ctx) => {
    // If Page/Component has a `getInitialProps`, we should call it.
    const props = WrappedComponent.getInitialProps && await WrappedComponent.getInitialProps(ctx);

    if (ctx && ctx.req) {
      let cookies = new Cookies(ctx.req?.headers?.cookie);
      if (cookies.get('secret_token')) {
        const res = await getStatus(ctx.req.headers.cookie);
        if (res.success) {
          const account = await getAccount(ctx.req.headers.cookie);
          return { ...props, user: res.user, account: account };
        }
      }
    }
    return { ...props, user: null };
  }

  return FuncComponent;
}

export default withAuth;

The getStatus is actually a function that performs a request on the API on my app. This API returns the account of the connected user. The FuncComponent, in that case, wakes up and updates the global state through an action.

[Amansaxena001]

if the page has getStatcProps How will u call it?

[sandys]

@jordymeow @josiahwiebe have you guys seen this discussion ? this might be relevant - #10724

[saeedPadyab]

Hello,

There are examples of how to perform authentification using cookies for one page (like the example with-cookie-auth), however, in the real world, when we use auth we also use it on many different pages.

I tried to play with the _app to catch getServiceSideProps (but that's not possible) or even the getInitialProps (never get called) with today's release of NextJS, but can't find any solution.

Ideally, I would love to do this in a HOC. I would use it only for my pages requiring authentification. That HOC would also update my global state. My problem is that I can find a way to make a HOC on which the getServiceSideProps get called. Is there a way?

Thanks a lot :)

Hey @jordymeow, any solution with getServerSideProps in a HOC for authentication??

[jordymeow]

Hi @saeedPadyab, sorry, I could not make it work with getServerSideProps for some reason. I am keeping an eye on the updated examples of the NextJS repository but I haven't seen them doing it yet. They are always using getServerSideProps as an export on a page (which is magically picked by the framework).

[dpcesx]

I can confirm that migrating examples of HOC from getInitialProps to getStatic**** does not work in my attempts. Using React Context in similar ways mentioned in this thread is my current approach too.

[xavierbeillas]

Hi all, same on my side. Any update ? :)

[jptaylor]

Having the same issue here. Assuming since the function is not exported the framework magic passes it over.

I'm using a (very) hacky workaround for now until I can figure the right method.

const WrappedPage = withWrapper(Room);

export function getServerSideProps(context) {
  return WrappedPage.getServerSideProps(context);
}

export default WrappedPage;

[yaohuangguan]

do not use functional component in _app.js.
see https://spectrum.chat/next-js/general/is-there-an-example-of-app-js-as-a-functional-component~bfc80353-edf0-4850-9442-5d6c2b030209

[th0th]

That conversation is kind of outdated. Even the example custom app on the docs is a functional component: https://nextjs.org/docs/advanced-features/custom-app

[JipSterk]

i found this https://github.com/piglovesyou/nextjs-passport-oauth-example/blob/9d7119368d5624bd638d3e83fc26b9f3a0bdbfa5/lib/withIdentity.tsx#L23
bit hacky but for the time it does the job

[ricardocanelas]

I don't know if it is a solution, but I am doing this way:

withAuthentication.js

const withAuthentication = WrappedComponent => props => {
  const { user } = useAuth()
  if (user) return <WrappedComponent {...props} />
  return <p>Unauthorized</p>
}

withAuthentication.isAuth = async ctx => {
   try{ 
      await axios.get('/api/me', { ctx }) // I use 'ctx' in the interceptors
      return true
   } catch(error) { 
      return false
   } 
}

export default withAuthentication

Then, in the page file:

pages/dashboard.js

const Dashboard = ({ data }) => { ... }

export async function getServerSideProps(ctx) {
  if (!(await withAuthentication.isAuth(ctx))) return { props: {} }
  // ...
}

export default withAuthentication(Dashboard)

[ricardocanelas]

You are right, it is better to use getInitialProps for that case.

[Yilong94]

Hi ricardocanelas, may I know what does useAuth() refer to in your code?

[ricardocanelas]

@Yilong94 , That refers to my own hook... I created one to handle the login/logout/register/etc and 'save' the user details after login.

[ivawzh]

Is it going to make an extra roundtrip to API via await axios.get('/api/me', { ctx }) on every request?

[ricardocanelas]

@ivawzh Yeap, I think there is a better way to check the user.

[johnpolacek]

I went down the rabbit hole on this one trying to update the with-firebase-authentication-serverless to use getServerSideProps but had to put it down. Would love to see some examples get migrated to show us the “right way”.

[justincy]

@timneutkens I don't believe we should be promoting the pattern used by with-iron-session because it technically causes an error and a full page reload, as explained here.

The best pattern I've seen yet is what @jbis9051 posted, but even better would be for getServerSideProps to be augmented to support a redirect prop, as recommended.

[justincy]

Also problematic is that the redirect pattern used by with-iron-session doesn't work in Safari.

[tettoffensive]

@hajola I like how much simpler your example is than the with-firebase-authentication-serverless exmpale , but I wonder if it's possible to do without next-iron-session because of what @justincy said.

@johnpolacek Are you concerned about using next-iron-session?

[vvo]

Hey there, just want to say that in with-iron-session you have two different patterns. One is the static generation and the redirects here are done in pure JavaScript (browser), this is totally fine and is how vercel.com/dashboard does it.

What @justincy is talking about is the server-side generation pattern which you are not forced to use at all. Here the redirect is not done properly it seems but that's a Next.js limitation for now if I understood well.

Thanks

[tettoffensive]

I see. I have only been in the react world for a couple weeks now (coming from Vue), so I understand a little bit of what you are talking about. Ultimately, I was hoping for a simpler server-side firebase authentication and saw @hajola's example which looks nice. But then I see all these messages like it doesn't work in Safari and causes an error and a full page reload and so for now, I've stuck with the version in the next.js examples.

[justincy]

I don't think you'll be able to use getServerSideProps in an HOC, at least not in the traditional sense since getServerSideProps is a separate export instead of being a member of the page component. But that's okay. There should still a way to do this.

I'm assuming that you're using getServerSideProps because you need to fetch data before rendering the page, and you want to check fo authentication before making the request, and probably redirect the user to the login page if they're not authenticated.

We can get all of that behavior with something like this:

export const getServerSideProps = (ctx) => {
    // I'm waving my hand here because how you determine whether the user
    // is authenticated is not the topic of discussion and it varies widely
    if (!isAuthenticated(context)) {
        ctx.res.writeHead(302, { Location: '/login' });
        ctx.res.end();
        return;
    }
    return {
        props: await getData('/api/data')
    }
}

We don't want to add that code to every page where we request data so we can easily abstract it into a helper method:

function ensureAuth(ctx) {
    if (!isAuthenticated(context)) {
        ctx.res.writeHead(302, { Location: '/login' });
        ctx.res.end();
        return;
    }
}

export const getServerSideProps = (ctx) => {
    ensureAuth(ctx);
    return {
        props: await getData('/api/data')
    }
}

Or a pattern that is more like an HOC:

function ensureAuth(gssp) {
    return async (ctx) => {
        if (!isAuthenticated(context)) {
            ctx.res.writeHead(302, { Location: '/login' });
            ctx.res.end();
            return;
        }
        return gssp(ctx);
    }
}

function getApiData(url) {
    return async (ctx) => {
        return {
            props: await getData(url)
        }
    }
}

export const getServerSideProps = ensureAuth(getApiData('/api/data'));

[justincy]

The with-iron-session and auth0 examples have been updated to do redirects from within getServerSideProps().

I still don't think this is correct. If you watch the network traffic, the browser follows the redirect and requests the page, but it was an AJAX request so the URL doesn't change. It just seems like Next is smart enough to figure out what's going on and makes another request for the page that the AJAX request was redirected to. It's very inefficient and perhaps only works due more to happenstance than intent. But I'm still learning.

[justincy]

Relevant discussion: #11281

[jbis9051]

What about if we did this solution in conjunction with a HOC to fix the weird redirect issues (which should be fixed anyway)? Basically, getServerSideProps would pass "redir" prop to a HOC, which would in turn redirect the user client side. If auth is successful then no redir is sent to the HOC, and the regular props are sent to the component. The react component would be sent to the client but the data (that you are trying to protect) wouldn't be. Hmm.

[platypusrex]

Glad I came across this comment. I've actually created a simple helper lib that I'm using to implement a similar pattern but supports composing and merging props here from any number of these functions supported by next. So now you can do something like this:

import { GetServerSidePropsContext } from 'next';

export interface GetServerSideBarProps {
  bar: 'bar';
}

interface GetServerSideBarPropsOptions {
  onSuccess?: (ctx: GetServerSidePropsContext) => void;
}

export const getServerSideBarProps = ({ onSuccess }: GetServerSideBarPropsOptions) =>
  async (ctx: GetServerSidePropsContext) => {
    onSuccess && onSuccess(ctx);
    return {
      props: {
        bar: 'bar',
      }
    };
  };

import { User } from '../interfaces';

export interface GetServerSideUserProps {
  users: User[];
}

interface GetServerSideUserPropsOptions {
  onSuccess?: (users: User[]) => void;
}

export const getServerSideUserProps = ({ onSuccess }: GetServerSideUserPropsOptions) =>
  async () => {
    const res = await fetch(`http://localhost:3000/api/users`);
    const users = await res.json();

    if (users && onSuccess) {
      onSuccess(users)
    }

    return {
      props: {
        users,
      }
    };
  };

// pages/index.tsx

import { NextPage } from 'next';
import { mergeProps } from 'next-merge-props';
import { getServerSideFooProps, GetServerSideFooProps } from '../lib/getServerSideFooProps';
import { getServerSideUserProps, GetServerSideUserProps } from '../lib/getServerSideUserProps';

type IndexPageProps =
  GetServerSideFooProps &
  GetServerSideUserProps;

const IndexPage: NextPage<IndexPageProps> = (props) => (
  <div>
    <pre>{JSON.stringify(props, null, 2) }</pre>
  </div>
);

export const getServerSideProps = mergeProps<IndexPageProps>(
  getServerSideFooProps({
    onSuccess: (ctx) => {
      // ...do something with context here
    }
  }),
  getServerSideUserProps({
    onSuccess: (users) => {
      // ...do something with the users result here
    }
  })
);

export default IndexPage;

[Amansaxena001]

how would u restrict a page by ssr if we are using SSG?

[jbis9051]

[jbis9051]

The HOC is really ugly, but the implementation is pretty good.

[Maetes]

I think the with-iron-Session and in there the static generation approach is a very good one for replace a HOC.

But it seems that I missed something...
I thought that a page will only be a static one by autogeneration when there is no fetch within it... but the useUser hook inside the profile-sg.js page does exactly that, so why it is a static generation page even w/o getStaticProps? Additionally I thought that getStaticProbs is only executed in the build time so only when I execute next build? May you can explain it to me? (Sorry im confused by now) @vvo

[vvo]

@universecoders If you need help with next-iron-session, please open an issue here: https://github.com/vvo/next-iron-session/

The profile-sg.js example is a completely static page. The user is requested from within your browser to a Next.js API route via a fetch call but it's happening from the browser, not the server.

getStaticProps is not required for a page to be a static page, only if you need to fetch data AND you want to have server side rendering using this data. For example to generate a page like /blog/post/234 where you want the HTML of this page to be specific to the post/234. But this could also be implemented in a way where /blog/post/234 does not have a getStaticProps in it and everything happens in the browser.

[jbis9051]

Ok I think I got! This is expanding on @justincy's idea.

Update: Make sure to split the two functions into two separate files in order for the code elimination to work.

// withAuthServerSide.tsx

import React from "react";

export function withAuthServerSideProps(getServerSidePropsFunc?: Function){
    return async (context: any) => {
        const user = await getUser(context);
        if(getServerSidePropsFunc){
            return {props: {user, data: await getServerSidePropsFunc(context, user)}};
        }
        return {props: {user, data: {props: {user}}}};
    }
}

async function  getUser(content: any) {
    return {
        id: 1,
        username: "JBis",
        email: "test@test.com"
    }
}


// withAuthComponent.tsx
export function withAuthComponent(Component: any){
    return ({user, data}:{user: any, data: any}) => {
        if(!user){
            return <h1>Denied</h1> // or redirect, we can use the Router because we are client side here
        }
        return <Component {...data.props}/>
    }
}

And then implement it:

// protected.tsx

import {withAuthComponent} from '../client/hoc/withAuthComponent';
import {withAuthServerSideProps} from '../client/hoc/withAuthServerSide';


function protectedPage({user}: {user: any}) {
    return <h1>Hello {user.username}</h1>
}

export default withAuthComponent(protectedPage)
export const getServerSideProps = withAuthServerSideProps();

Clean. Simple. Thoughts?

[paulocarmino]

Hi, I just tried to use this logic and added a line to have the redirect through the Router, but I had the error below:

Error: No router instance found.
You should only use "next/router" inside the client side of your app.

So I added the verification that the user does not exist together with the redirect in the withAuthServerSideProps:

// withAuth.js
export function withAuthServerSideProps(getServerSidePropsFunc) {
  return async (context) => {
    const user = await getUser();
    if (!user) {
      context.res.writeHead(302, {
        Location: '/auth/login',
      });
      context.res.end();
    }
    if (getServerSidePropsFunc) {
      return {
        props: { user, data: await getServerSidePropsFunc(context, user) },
      };
    }
    return { props: { user, data: { props: { user } } } };
  };
}

So, is it a correct way?

[adilhaddaoui]

That's a very good pattern to achieve that, thanks @jbis9051, as I'm working with the canary version now I got access to getSessionContext so it worked for me perfectly with few changes

export function withAuthServerSideProps(getServerSidePropsFunc?: Function) {
	return async (context: any) => {
		const session = await getSessionContext(context.req, context.res)
		if (!session.isAuthorized) {
			context.res.writeHead(302, {
				Location: '/',
			})
			context.res.end()
		}
		const user = { userId: session.userId, roles: session.roles }
		if (getServerSidePropsFunc) {
			return { props: { user, data: await getServerSidePropsFunc(context, user) } }
		}
		return { props: { user, data: { props: { user } } } }
	}
}

[TheDarkStrix]

@justincy

Sorry for the noob question. We know all pages that need to be protected need to exported like this :

// in protected.tsx

export default withAuthComponent(protectedPage);
export const getServerSideProps = withAuthServerSideProps();

Note the getServerSideProps here, now in my protected.tsx page i want to load data using getServerSideProps, there will be a 2 getServerSideProps which isn't allowed [duplicate function].

getServerSideProp doesn't seem to work on child components i.e Parent having getServerSideProps and child having getServerSideProps to load data. How do I get this working , is there anything that I am missing ?

[jbis9051]

@TheDarkStrix You can pass your normal getServerSideProps to withAuthServerSideProps. It will only run if the user is authenticated.

[quiin]

Thanks a lot @jbis9051 you are a life saver!
Here's how I ended up implementing it. I was able to get rid of the higher order component and solely use the higher order function wrapping getServerSideProps by using redirect to automatically send unauthorized users to the login page (with a neat optional notice)
Note: I'm using query-string as a third party dependency as well as react-hot-toast to show a nice notification when attempting to access a protected page.

// lib/authServerSideProps.js
import queryString from "query-string";

export default function withAuthServerSideProps({
  getServerSideProps = null,
  redirectTo = "/login",
  urlNotice = true,
} = {}) {
  return async (context) => {
    const isAuthenticated = Boolean(context?.req.cookies?.session);
    // Authorized => Proceed as usual.
    if (isAuthenticated) {
      const serverSideProps = {
        props: { isAuthenticated },
      };
      if (getServerSideProps && getServerSideProps instanceof Function) {
        serverSideProps.props.data = await getServerSideProps(context);
      }
      return serverSideProps;
    }
    // Get the url and query params for the page that was attempted.
    const { url, query } = queryString.parseUrl(context.req.url);
    // Stripe out any existing next or authRequired query params on the current page.
    delete query.next;
    delete query.authRequired;
    const nextUrl = queryString.stringifyUrl({ url, query });
    // Set the next query parameter to the page that was attempted.
    const destParams = { next: nextUrl };
    if (urlNotice) {
      destParams.authRequired = true;
    }
    // Redirect unauthenticated users to the specified location.
    const destination = queryString.stringifyUrl({ url: redirectTo, query: destParams });
    return {
      redirect: {
        destination,
        permanent: false,
      },
    };
  };
};

Then this can be used as follows:

// /pages/dashboard.jsx
import withAuthServerSideProps from '@lib/authServerSideProps'

export default function Dashboard() {
  return (
    <main>Dashboard here!</main>
  )
}
export const getServerSideProps = withAuthServerSideProps();
// Or by providing a more specific configuration
export const getServerSideProps = withAuthServerSideProps({
  getServerSideProps: await axios.get('/api/getDashboardData'),
  redirectTo: '/another/path',
  urlNotice: false
});

Then whenever an unauthenticated user attempts to access an page that requires authorization, he/she will be automatically redirected to the given path and upon login we can use the next query paramer to redirect them back to the page they tried to access upon successfully signing in.

Similarly, we can use authRequired to show a neat notice to the user

// _app.jsx
import { useEffect, useRef } from 'react';
import toast, { Toaster } from 'react-hot-toast'
import { useRouter } from 'next/router'
export default function App({ Component, pageProps }) {
  const router = useRouter()
  const authToast = useRef(null)
  const { authRequired } = router.query
  useEffect(() => {
    if (!router.isReady || !authRequired === 'true) return;
    // Dismiss any previously shown auth toast (prevents toast stacking)
    authToast.current && toast.dismiss(authToast.current)
    // Show toast
    authToast.current = toast.error('Please signin to continue')
  }, [Component, router.isReady])
  return (
    ...
    <Component {...pageProps}/>
    <Toaster/>
  )
}

[vvo]

For anyone following this topic of authentication in Next.js. I spent a lot of time digging the subject of authentication in Next.js and ended up implementing almost exactly what the vercel.com/dashboard is doing: that's next-iron-session (https://github.com/vvo/next-iron-session/). The Next.js example from the repo will show you how to use SWR to authenticate clients from the frontend and automatically redirecting when people are not logged in.

Though one thing that is not shown in the example is how to have a "global user state". Because I think this is not the "SWR way", which is to avoid having to use any complex state handling library and just have either HOCs around components forwarding you the user or just go with requesting the user on every page you need it. SWR will deduplicate automatically, so your code becomes clearer: you never wonder where does this user comes from: you asked for it via const user = useUser();

About "Not the right way to do redirects" this only applies to the server side generated example of next-iron-session. In most cases you want to stick with static generation and redirects using JavaScript only (like vercel.com/dashboard).

If you're concerned about the redirects being "not done well", for now this is a Next.js limitation and the tracking issue is: #12409

[Kamez]

After I log in and got to /profile-sg then I try to type /login direct from url it still shows login page a while before it shows profile page.

[vvo]

Yes, since the redirect is client-side, this is the behavior you can have. You could either:

• not care about it, once logged in, if there's no link to log-in page then nobody will see it
• show a loading indicator or fake page skeleton while the user log in API route is called to check for logged in user

For any other inquiry about next-iron-session, create issues here: https://github.com/vvo/next-iron-session thanks!

[timneutkens]

Opened a RFC for redirecting here: #14890

[gmencz]

For anyone following this topic I wrote a custom getServerSideProps and a couple of typescript utilities for it.

import { GetServerSidePropsContext } from 'next'

type AsyncReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => Promise<infer U>
  ? U
  : T extends (...args: any) => infer U
  ? U
  : any

export type InferWithAuthServerSideProps<
  T extends (...args: any) => Promise<{ props: any }>
> = AsyncReturnType<T>['props']

type WithAuthServerSidePropsOptions = {
  authenticatedPage?: boolean
}

export type AuthenticatedPageProps = {
  user: User
}

type EmptyProps = {
  props: Record<string, unknown>
}

type DefaultWithAuthServerSideProps = {
  user: User
}

function withAuthServerSideProps<T extends EmptyProps = EmptyProps>(
  getServerSidePropsFunc?: (
    ctx: GetServerSidePropsContext,
    user?: User,
  ) => Promise<T>,
  options: WithAuthServerSidePropsOptions = {},
) {
  return async function getMergedServerSideProps(
    ctx: GetServerSidePropsContext,
  ): Promise<{ props: T['props'] & DefaultWithAuthServerSideProps }> {
    let loggedInUser: User | null = null
    try {
      loggedInUser = await getLoggedInUser(ctx.req.headers.cookie || '')
    } catch {
      loggedInUser = null
    }

    if (options.authenticatedPage && !loggedInUser) {
      return ({
        redirect: {
          destination: '/sign-in',
          permanent: false,
        },
        // We have to trick the TS compiler here.
      } as unknown) as { props: T['props'] & DefaultWithAuthServerSideProps }
    }

    if (getServerSidePropsFunc) {
      return {
        props: {
          user: loggedInUser,
          ...((await getServerSidePropsFunc(ctx, loggedInUser)).props || {}),
        },
      }
    }

    return {
      props: {
        user: loggedInUser,
      },
    }
  }
}

export { withAuthServerSideProps }

I'm by no means a typescript expert so it would be nice if we didn't have to trick the TS compiler when returning a redirect instead of props but I couldn't figure out how to do it.

And here's how you would use it:

import {
  InferWithAuthServerSideProps,
  withAuthServerSideProps,
} from '../utils/with-auth-server-side-props'

export const getServerSideProps = withAuthServerSideProps(async (_ctx, user) => {
    const posts = await getPosts(user.id)
    return {
      props: {
        posts
      }
    }
}, {
  authenticatedPage: true,
})

type AppProps = InferWithAuthServerSideProps<typeof getServerSideProps>

function App({ user, posts }: AppProps) {
  return <p>Hello {user.username} 👋, you have {posts.length} posts.</p>
}

export default App

[rafma0]

Thank you. Based on this and using js I have

export function withAuthServerSideProps(getServerSidePropsFunc, options = {}) {
  return async (context) => {
    const user = await getUserByToken(context);

    if ((options.needUser && !user) || (options.needAdmin && !user?.admin)) {
      if (options.origin)
        setOriginCookie(options.origin, context);
      return {
        redirect: {
          permanent: false,
          destination: '/login'
        }
      }
    }

    if (getServerSidePropsFunc) {
      return {
        props: {
          user,
          ...((await getServerSidePropsFunc(context, user)).props || {}),
        },
      }
    }
    return {
      props: {
        user,
      },
    }
  }
}

and I use it like

export const getServerSideProps = withAuthServerSideProps(async (context, user) => {
  const courses = await apiRequest('GET', '/me/courses', null, context);
 // console.log(user.id);

  return {
    props: { courses: courses.data },
  }
}, {
  needUser: true,
  origin: '/my-courses'
})

[rlenoir-codepoint]

Based on the excellent and very helpful previous answers of this discussion, I have implemented the support for the Next.js redirect (@gmencz) and notFound (see GetServerSideProps docs), with Typescript.

import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';

type IncomingGSSP<P> = (ctx: GetServerSidePropsContext, user: User) => Promise<P>;

type WithAuthServerSidePropsResult = GetServerSidePropsResult<{ [key: string]: any }>;

type WithAuthServerSidePropsOptions = {
  // any options you eventually would like to pass (required role...)
};

function withAuthServerSideProps(
  incomingGSSP?: IncomingGSSP<WithAuthServerSidePropsResult> | null,
  options?: WithAuthServerSidePropsOptions
) {
  return async (ctx: GetServerSidePropsContext): Promise<WithAuthServerSidePropsResult> => {
    
    // YOUR LOGIC HERE (user check, role check...)
    
    if (incomingGSSP) {
      const incomingGSSPResult = await incomingGSSP(ctx, user);

      if ('props' in incomingGSSPResult) {
        return { props: { ...incomingGSSPResult.props, user } };
      }

      if ('redirect' in incomingGSSPResult) {
        return { redirect: { ...incomingGSSPResult.redirect } };
      }

      if ('notFound' in incomingGSSPResult) {
        return { notFound: incomingGSSPResult.notFound };
      }
    }

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

And then use it like

export const getServerSideProps = withAuthServerSideProps(async (ctx, user) => {
  // Example 1 - Not found
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return { props: { data } }

  // Example 2 - Redirect
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return { props: { data } }
});

[xemil]

Typescript version
use as

withAuthServerSideProps<MyDataTypeFromPage>

---

import React from "react";
import {
  GetServerSidePropsContext,
  GetServerSidePropsResult,
  InferGetServerSidePropsType,
} from "next";

// authWrapper.ts
type CommonAuthData = {
  user: string;
};

type IncomingPageServerSideProp<P> = (
  ctx: GetServerSidePropsContext,
  data: CommonAuthData
) => Promise<GetServerSidePropsResult<P>>;

type WithAuthServerSidePropsOptions = {
  skipAuth?: boolean;
};

export function withAuthServerSideProps<T>(
  incomingGSSP?: IncomingPageServerSideProp<T> | null,
  options?: WithAuthServerSidePropsOptions
) {
  return async (
    ctx: GetServerSidePropsContext
  ): Promise<GetServerSidePropsResult<{ common: CommonAuthData; data: T }>> => {
    const { skipAuth } = options;
    if (skipAuth) {
      return {
        props: {
          common: null,
          data: null,
        },
      };
    }

    // YOUR LOGIC HERE (user check, role check...)
    const user = "xxyyzz";

    if (incomingGSSP) {
      const incomingGSSPResult = await incomingGSSP(ctx, {
        user,
      });

      if ("props" in incomingGSSPResult) {
        return {
          props: {
            common: {
              user,
            },
            data: { ...incomingGSSPResult.props },
          },
        };
      }

      if ("redirect" in incomingGSSPResult) {
        return { redirect: { ...incomingGSSPResult.redirect } };
      }

      if ("notFound" in incomingGSSPResult) {
        return { notFound: incomingGSSPResult.notFound };
      }
    }

    // FALLBACK
    return {
      props: {
        common: null,
        data: null,
      },
    };
  };
}

// authWrapper.ts end

// SEARCHPAGE.tsx START
type MyDataTypeFromPage = {
  dataFechedAtPage: string;
};

const SearchPage: React.FunctionComponent<PageProps> = (props) => {
  const { data, common } = props;
  console.log({ props });
  return (
    <div className="flex flex-col items-center bg-mhbeige">
      <p>
        LOOADDED {JSON.stringify(data)} {JSON.stringify(common)}
      </p>
    </div>
  );
};

type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>;

export default SearchPage;

export const getServerSideProps = withAuthServerSideProps<MyDataTypeFromPage>(
  async (ctx, data) => {
    // Example 1 - Not found

    // data from Auth...
    console.log("3", data.user);

    return {
      props: {
        dataFechedAtPage: "MY DATA",
      },
    };

    // // NO DATA
    // const res = await fetch(`https://...`);
    // const pageData = await res.json();

    // if (!pageData) {
    //   return {
    //     notFound: true,
    //   };
    // }

    // return { props: { dataFechedAtPage: pageData } };

    // Example 2 - Redirect
    // const res = await fetch(`https://.../data`);
    // const pageData = await res.json();
    // if (!pageData) {
    //   return {
    //     redirect: {
    //       destination: "/",
    //       permanent: false,
    //     },
    //   };
    // }
  },
  {
    skipAuth: true,
  }
);

// SEARCHPAGE.TSX END

// APP TSX... spread pageprops
class MyApp extends App {
  render() {
    const { Component, pageProps, ...rest } = this.props;
    return <Component {...rest} {...pageProps} />;
  }
}

@rlenoir-codepoint thx!

[hect1c]

Hey,

Thanks for these great examples. I went with the one that uses NextAuth, however did anyone notice an increase in load time for the page when adding getSession(ctx). Seems this adds 10-15 seconds page load but if I comment out any of the getSession and getCsrfToken methods this goes back to under 200ms. Has anyone ran into this issue? Could there be any reason as to why this would happen?

[bonnetvinc]

Thanks for your great example.
I am trying to implement il my app but it seems that i encouter some problems with next-i18next did someone could help me with that.

function SecurePage(props): JSX.Element {
  const { t } = useTranslation('common');

  console.info('secure page', props);
  return (
    <>
      <p>{t('welcomeMessageLearningPortal')}</p>
      <p>This is my secret page </p>
    </>
  );
}

export default withAuthComponent(SecurePage);

export const getServerSideProps = withAuthServerSideProps(async (_ctx) => ({
  props: {
    ...(await serverSideTranslations(_ctx.locale, ['common'])),
  },
}));


// withAuthServerSide.tsx
export function withAuthServerSideProps(getServerSidePropsFunc?: Function) {
  return async (ctx: any) => {
    const validateUser = await fetch(`http://localhost:3000/api/user/validate`, {
      headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined,
    });

    if (getServerSidePropsFunc) {
      return {
        props: {
          isUserLogged: validateUser.ok,
          data: { ...((await getServerSidePropsFunc(ctx)).props || {}) },
        },
      };
    }
    return {
      props: {
        isUserLogged: validateUser.ok,
      },
    };
  };
}

// withAuthComp.tsx
export function withAuthComponent(Component: any) {
  return ({ isUserLogged, data }: { isUserLogged: any; data: any }) => {
    if (!isUserLogged) {
      return <h1>Denied</h1>;
    }
    return <Component {...data} />;
  };
}

The component is well displayed but translation does not works. I see on the console that props are correct, If i try with the same component but without withAuthComp and withAuthServerSideProps . Like this, everything is good .
any idea ?

  const { t } = useTranslation('common');

  console.info('un secure ', props);
  return (
    <Container maxWidth={false}>
      <Head>
        <title>Sequoia</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <p>{t('welcomeMessageLearningPortal')}</p>
      <p>This is my secret page </p>
    </Container>
  );
}

export default Unsecure;

export const getServerSideProps: GetServerSideProps<SSRConfig> = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});

[egisz]

How about using firebase proposed way of handling user sessions
also with proposed way to share session with backend?

From their example repo:

The application demonstrates how Firebase Auth can be used to manage user sessions using service workers without having to set session cookies.
Firebase Auth is optimized to run on the client side. Tokens are saved in web storage. This makes it easy to also integrate with other Firebase services such as Realtime Database, Cloud Firestore, Cloud Storage, etc. To manage sessions from a server side perspective, ID tokens have to be retrieved and passed to the server.

[deadcoder0904]

I faced the same problem & found a simple solution (using iron-session):

import { GetServerSidePropsContext } from 'next'
import { withSessionSsr } from '@/utils/index'

export const withAuth = (gssp: any) => {
	return async (context: GetServerSidePropsContext) => {
		const { req } = context
		const user = req.session.user

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

		return await gssp(context)
	}
}

export const withAuthSsr = (handler: any) => withSessionSsr(withAuth(handler))

And then I use it like:

export const getServerSideProps = withAuthSsr((context: GetServerSidePropsContext) => {
	return {
		props: {},
	}
})

My withSessionSsr function looks like:

import { GetServerSidePropsContext, GetServerSidePropsResult, NextApiHandler } from 'next'
import { withIronSessionApiRoute, withIronSessionSsr } from 'iron-session/next'
import { IronSessionOptions } from 'iron-session'

const IRON_OPTIONS: IronSessionOptions = {
	cookieName: process.env.IRON_COOKIE_NAME,
	password: process.env.IRON_PASSWORD,
	ttl: 60 * 2,
}

function withSessionRoute(handler: NextApiHandler) {
	return withIronSessionApiRoute(handler, IRON_OPTIONS)
}

// Theses types are compatible with InferGetStaticPropsType https://nextjs.org/docs/basic-features/data-fetching#typescript-use-getstaticprops
function withSessionSsr<P extends { [key: string]: unknown } = { [key: string]: unknown }>(
	handler: (
		context: GetServerSidePropsContext
	) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
) {
	return withIronSessionSsr(handler, IRON_OPTIONS)
}

export { withSessionRoute, withSessionSsr }

[GabenGar]

Do not do object exports of modules like this. If you want to do named exports then export each function separately.

[TempleClause]

@GabenGar why?

[timfee]

Hi! I tried my hand at a POC repo that brings this all together with the latest Next & Typescript versions (using NextAuth.js):

https://github.com/timfee/nextauthjs-server-side-props-wrapper