How to extend withAuthUserTokenSSR?

[KeisukeNagakawa]

Hi. I'm using this library and feels it very useful. Thanks, first of all.

Today I would like to ask whether there is a proper way of extendingwithAuthUserTokenSSR.

Problem

I need my users to be redirected to onboarding page whenever they are logged in and onboarding flow(such as registering user profile) are not completed.

Alternative

Since I do not know the proper way of extending withAuthTokenSSR, currently I am writing my custom-made onboardRedirect function to the first line of everywithAuthUserTokenSSR description:

// withAuthTokenSSR
// I am wrigin this function below everywhere.
export const getServerSideProps = withAuthUserTokenSSR({
  whenUnauthed: AuthAction.RENDER,
})(async ({ AuthUser, req, resolvedUrl }) => {
  if (!AuthUser.claims["onboarded"]) {
    return {
      redirect: { statusCode: 302, destination: "/onboard" },
    }
  }
...

Is there a better way for this? Thank you.

[kmjennison]

Thanks, I'm glad you're finding this library useful!

It sounds like you want to use this same logic anywhere you're using withAuthUserTokenSSR. For that, I'd suggest you create a composed function made up of withAuthUserTokenSSR followed by your custom redirect logic. Here's an example of function composition we use in one of our apps; the functions following withAuthUserTokenSSR have access to AuthUser and could choose to redirect.

If you define your composed function in a module, you can reuse it on your pages without defining custom logic each time.

[KeisukeNagakawa]

@kmjennison thank you very much. I have read your answer and example you have attached but it was a bit too difficult for me... If you have time, could you please tell me the simplest code to extend withAuthUserTokenSSR (like extending with console.log("some words")) as follows in typescript:

# typescript
import { withAuthUserTokenSSR } from "next-firebase-auth"

export const withAuthUserTokenSSRExtended = (props:any) => {
  console.log("some extended script here, like redirecting if user is not done onboarding process...")
  return withAuthUserTokenSSR(props)
}

Thanks.

[dan-sproutward]

Hopefully this is helpful. Thought it would be useful to close this out. See code and explanation below.

const doSomething = (getServerSidePropsFunc) => async (ctx) => {
  console.log("some extended script here, like redirecting if user is not done onboarding process...")
  // if redirect then return redirect here
  if (shouldRedirect) {
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }
  //otherwise, continue calling getServerSideFunc
  let composedProps = {}
  if (getServerSidePropsFunc) {
    //if a new object is retrieved you want to pass on, add it to ctx here
    ctx.user = user
    // call getServerSidePropsFunc which is serverSideRenderedFunc
    composedProps = await getServerSidePropsFunc(ctx)
  }
  const returnData = { ...composedProps }
  returnData.props = {
    newProp
  }
  return returnData
}

// wrapper uses compose via flowRight to build the chain and ultimately return the closure from withAuthUserTokenSSR
const ssrWrapper = (serverSideRenderedFunction) => flowRight([
  withAuthUserTokenSSR({
    whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,
  }),
  doSomething
])(serverSideRenderedFunction)

//original export of getServerSideProps using the wrapper
export const getServerSideProps = ssrWrapper(
  async (ctx) => {
    const { user } = ctx
    const clients = await getClients()
    return {
      props: {
        user,
        clients
      }
    }
  }
)

Here is how this works. It processes in three passes.

1. The first pass: process flowRight with an array of functions. flowRight returns a closure that will kick off the chain with arguments passed in. In this case, the flowRight closure is passed serverSideRenderedFunction which calls doSomething with serverSideRenderedFunction. doSomething returns a closure that is passed to withAuthUserTokenSSR which returns a closure that is assigned to getServerSideProps.
2. The second pass: Next calls getServerSideProps(which is the closure from withAuthUserTokenSSR) passing ctx. As withAuthUserTokenSSR processes, it attaches AuthUser to ctx and calls the doSomething closure with ctx. doSomething closure attaches user to ctx and calls serverSideRenderedFunction with ctx. ctx now has AuthUser and user attached to it.
3. The third pass: serverSideRenderedFunction returns an object with a props property with user and clients. This is returned to the doSomething closure to finish processing which returns the object with props from serverSideRenderedFunction to withAuthUserTokenSSR. withAuthUserTokenSSR finishes processing and returns the object with props from serverSideRenderedFunction back to Next which passes this to the component.

So, if doSomething wants to redirect, it should short circuit the second pass and not call serverSideRenderedFunction with ctx and instead return an object with redirect property to withAuthUserTokenSSR. withAuthUserTokenSSR will return this object back to the getServerSideProps caller(Next) to handle the redirect.

withAuthUserTokenSSR also has redirect logic which will short circuit the second pass and immediately return back to Next a redirect object and never call doSomething when, for instance, whenUnauthed is passed with a value of AuthAction.REDIRECT_TO_LOGIN.