[legacy-framework] Add authenticated layout support with Layout.authenticate

[JuanM04]

Closes: blitz-js/legacy-framework#349

What are the changes and their implications?

It allows for authenticated layouts. It searches the React tree returned by getLayout and uses the first component with either authenticate or redirectAuthenticatedTo as the default. This value can be overwritten in a per-page basis with the already implemented Page.authenticate

Also, the layout is automatically rendered by BlitzInnerRoot, because it can lead to unwanted behavior

Feature Checklist

• Integration test added (see test docs if needed)
• Documentation added/updated (submit PR to blitzjs.com repo)

[flybayer]

Wow this looks really great! Just need a docs PR now

[flybayer]

One question: what happens if user still has their own getLayout() call inside their _app? Will it continue to render fine, just without layout authenticated support?

[JuanM04]

what happens if user still has their own getLayout() call inside their _app?

@flybayer It will render the Layout twice, one inside the other. So, the changelog must acknowledge this and tell people to strip it from their _app

[JuanM04]

I figured out a problem I didn't know until now. With this setup, the layout re-renders when the page changes. However, if I remove the getLayout inside BlitzInnerRoot and move it back inside _app, it will work like before, but it will be rendered no matter the state of Layout.authenticate. Should I keep the old behavior and add a note in the docs, or do you have another solution?

[flybayer]

but it will be rendered no matter the state of Layout.authenticate

What do you mean by this?

[JuanM04]

For example, if there is a query inside that layout, it will run even if Layout.authenticate = true and the user isn't authenticated. This could lead to unexpected behavior, like throws of UnauthenticatedErrors

[flybayer]

@JuanM04 ok so essentially with that approach it's not really adding any functionality at all, right?

Can we expose some helper function like this to make it fully work?

// _app.tsx
import {composeLayouts} from 'blitz'

export default function App({Component, pageProps}: AppProps) {
-  const getLayout = Component.getLayout || ((page) => page)
+  const renderWithLayout = composeLayouts(Component)

Not sure that's the best name, but you get the idea.

[JuanM04]

@flybayer sorry, I got confused and it's hard to me to explain technical issues. Yes, this add functionality.

However, there is an edge case (that existed before; it wasn't introduced by this PR):

const Layout = ({children}) => {
  console.log('Log from Layout')
  return <div>{children}</div>
}

const Page = () => {
  console.log('Log from Page')
  return <h1>Authenticated Page </h1>
}

Page.authenticated = true
Page.getLayout = (page) => <Layout>{page}</Layout>

// logs from someone authenticated:
// > Log from Layout
// > Log from Page

// logs from someone unauthenticated:
// > Log from Layout

When someone unauthenticated loads that page, the code inside Page doesn't run while the code inside Layout does. I wanted to mention this somewhere since writing Layout.authenticated = true may seem like it will behave exactly as Page.authenticated = true but it doesn't.

(Note: forget what I said about the breaking changes, I updated the PR so you still need to declare const getLayout = ... inside _app)