Add documentation and example for dynamic redirects about next-firebase-auth

[litewarp]

Just to chime in with an example Login Page I'm using in an app. If a user attempts to hit an authenticated endpoint but is not authenticated, the app will redirect to the login page, but append the original route to the login url, e.g., /login?next=/dashboard?id=1234. So in the login flow, if the user is successful in authenticating, we redirect them back to the page.

/**
 * @/pages/login
 */
import dynamic from 'next/dynamic'
import { NextPage } from 'next'
import { withAuthUser, AuthAction } from 'next-firebase-auth'
import { SimplePageWrapper } from '@/components/layout/PageWrapper'
import FullComponentLoader from '@/components/layout/FullComponentLoader'

const FirebaseAuth = dynamic(() => import('@/components/auth/FirebaseAuth', {
  ssr: false,
})

const Login: NextPage = () => (
  <SimplePageWrapper title="Login">
    <h1>Welcome to My New App!</h1>
    <br />
   <FirebaseAuth />
  </SimplePageWrapper>
)

export default withAuthUser({
  whenAuthed: AuthAction.REDIRECT_TO_APP,
  whenUnauthedBeforeInit: AuthAction.SHOW_LOADER,
  whenUnauthedAfterInit: AuthAction.RENDER,
  LoaderComponent: FullComponentLoader,
  appPageURL: ({ ctx, AuthUser }) => {
    const params =
      typeof window === 'undefined'
        ? new URL(ctx.req.url).searchParams
        : new URLSearchParams(window.location.search)
    const next = params.get('next')
    return next ?? '/dashboard' // return default if no param exists
})(Login)

[perjonsson]

@litewarp That's exactly what I was looking for. If someone else wants to try this out before the stable release, you need the latest alpha to allow appPageURL to accept a function and not just a string.

[grahaml]

Ahh the dynamic import for the FirebaseAuth component is a great idea. I will have to try that. I hacked a way to get it not render server side, but this feels much cleaner. Thanks for sharing!