Make Auth wrapper component work for SSR as well

[rishabhpoddar]

• This would be useful in usage for NextJS apps

[rishabhpoddar]

TODO now

The default userContext will be:

{
   isLoading: true,
   isDefaultContext: true
}

We want to change the session context type to:

{
    isLoading: false,
    doesSessionExist: false,
    userId: string,
    accessTokenPayload: {},
} | {
   isLoading: true,
   isDefaultContext: boolean
}

However, we would change the return type of useSessionContext to be:

{
    isLoading: false,
    doesSessionExist: false,
    userId: string,
    accessTokenPayload: {},
} | {
   isLoading: true,
}

Because, the user should not care about isDefaultContext. We should also throw in useSessionContext if it's being called from a component that's not "eventually" a child a SessionAuth

• requireAuth: true and isLoading: true:
  • We don't wanna render the child, and render null.
  • The reason for this is that someone may create a child component and not check the context in there since they expect it to load only if a session exists.
  • One issue with this is that it will cause the user to have to check !context.isLoading unnecessarily (from a types point of view) - but that's OK. In the future, we can checkout React suspense to solve this.
• else:
  • We render the child with whatever the context state is, which on the server side, will always be isLoading: true (since that's the default context).

The reason we have isLoading instead of rendering null is cause maybe many of the SSR pages don't actually care about checking the session context, in which case they would render fine, as opposed to not being rendered (if we were to render null).

TODO later

User doesn't care about server side rendering (ssr prop not give):

Same case as what we already have

User who care about server side rendering (ssr prop give):

• requireAuth: true, userId exists:
  • give the proper session context (session does exist).
• requireAuth: true, userId doesn't exists:
  • We don't wanna render the child, and render null.
• requireAuth: false, userId exists:
  • give the proper session context (session does exist).
• requireAuth: false, userId doesn't exists:
  • give the proper session context (session does not exist).

Affect on supertokensWrapper:

• This would itself get the ssr prop and pass it ontp <SessionAuth requireAuth={false} ssr={...}/>
• This would always result in the children rendering on server side.