Home.authenticate = true throws React styling error

[Slein2012]

What is the problem?

If Home.authenticate = true is set on a page, then there is always an error in the browser console such as Warning: Expected server HTML to contain a matching <h1> in <div>. and the styling of the login page is no longer correct. On the normal page localhost:3000/login, however, everything works perfectly. I suspect it's a problem with React hydrating the page, but maybe I'm making a mistake if the Home.authenticate = true function throws an error and prevents styling. With normal browser styling there can't be senn much of a difference to the normal /login page, but with a styled LoginForm there can be seen a corrupted styling.

Paste all your error logs here:

Just an example. Differs depending on the styling of the LoginForm.tsx

Warning: Expected server HTML to contain a matching <h1> in <div>.
    at h1
    at div
    at LoginForm3 (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:2444:81)
    at RootErrorFallback (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:3218:20)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:1070:35)
    at Suspense
    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:3181:25)
    at Hydrate (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:10987:23)
    at QueryClientProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:11062:21)
    at BlitzProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:1013:21)
    at BlitzOuterRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1628195781649:1488:15)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1628195781649:767:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1628195781649:883:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1628195781649:8773:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1628195781649:9263:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1628195781649:9399:25)

Paste all relevant code snippets here:

LoginForm.tsx (not modified from blitz new)

import {AuthenticationError, Link, useMutation} from "blitz"
import {LabeledTextField} from "app/core/components/LabeledTextField"
import {Form, FORM_ERROR} from "app/core/components/Form"
import login from "app/auth/mutations/login"
import {Login} from "app/auth/validations"

import {Routes} from ".blitz"

type LoginFormProps = {
  onSuccess?: () => void
}

export const LoginForm = (props: LoginFormProps) => {
  const [loginMutation] = useMutation(login)

  return (
    <div>
      <h1>Login</h1>

      <Form
        submitText="Login"
        schema={Login}
        initialValues={{email: "", password: ""}}
        onSubmit={async (values) => {
          try {
            await loginMutation(values)
            props.onSuccess?.()
          } catch (error) {
            if (error instanceof AuthenticationError) {
              return {[FORM_ERROR]: "Sorry, those credentials are invalid"}
            } else {
              return {
                [FORM_ERROR]:
                  "Sorry, we had an unexpected error. Please try again. - " + error.toString(),
              }
            }
          }
        }}
      >
        <LabeledTextField name="email" label="Email" placeholder="Email" />
        <LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
        <div>
          <Link href={Routes.ForgotPasswordPage()}>
            <a>Forgot your password?</a>
          </Link>
        </div>
      </Form>

      <div style={{marginTop: "1rem"}}>
        Or <Link href={Routes.SignupPage()}>Sign Up</Link>
      </div>
    </div>
  )
}

export default LoginForm

login.tsx (also not modified from blitz new)

import React from "react"
import { useRouter, BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
import { LoginForm } from "app/auth/components/LoginForm"
import { Routes } from ".blitz"

const LoginPage: BlitzPage = () => {
  const router = useRouter()

  return (
    <div>
      <LoginForm
        onSuccess={() => {
          const next = router.query.next ? decodeURIComponent(router.query.next as string) : "/"
          router.push(next)
        }}
      />
    </div>
  )
}

LoginPage.redirectAuthenticatedTo = Routes.Home().pathname
LoginPage.getLayout = (page) => <Layout title="Log In">{page}</Layout>

export default LoginPage

On any BlitzPage

BlitzPageName.authenticate = true

What are detailed steps to reproduce this?

1. New Blitz app
2. add Home.authenticate = true on the bottom of the index.tsx file
3. run blitz dev
4. Open Browser console

Run blitz -v and paste the output here:

Windows 10 | win32-x64 | Node: v14.15.0

blitz: 0.38.6 (local)

  Package manager: npm 
  System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-6400 CPU @ 2.70GHz
    Memory: 1.14 GB / 7.95 GB
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE    
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.28.0 => 2.28.0
    blitz: 0.38.6 => 0.38.6
    prisma: 2.28.0 => 2.28.0
    react: alpha => 18.0.0-alpha-19092ac8c-20210803
    react-dom: alpha => 18.0.0-alpha-19092ac8c-20210803
    typescript: ~4.3 => 4.3.5

Please include below any other applicable logs and screenshots that show your problem:

On any page exept /login

On login page

[flybayer]

Hey @Slein2012. The console warning is expected (see https://github.com/blitz-js/legacy-framework/issues/56). But if we are having styling issues, then that is a problem.

Can you provide exact steps to reproduce the styling issue? Maybe a codesandbox?

[MrLeebo]

@Slein2012 check if you get the proper styling if you change the authenticate call:

- BlitzPageName.authenticate = true
+ BlitzPageName.authenticate = { redirectTo: "/login" }

While these lines appear equivalent, how they're implemented is actually slightly different. Specifying a redirectTo will, as the name implies, redirect you to the page, and it seems like true would be a shorthand for the same behavior, but instead it raises an AuthenticationError that gets caught by the RootErrorFallback in _app.tsx. The default fallback for authentication errors is to render the LoginForm component. So any styles that are applied on the Page itself and not the LoginForm component won't be in scope for the error fallback. You can resolve the issue by moving your style declarations into the LoginForm component instead.

[flybayer]

Also please test with Blitz 0.40.0 and report back

[ajanth97]

@Slein2012 check if you get the proper styling if you change the authenticate call:

- BlitzPageName.authenticate = true
+ BlitzPageName.authenticate = { redirectTo: "/login" }

While these lines appear equivalent, how they're implemented is actually slightly different. Specifying a redirectTo will, as the name implies, redirect you to the page, and it seems like true would be a shorthand for the same behavior, but instead it raises an AuthenticationError that gets caught by the RootErrorFallback in _app.tsx. The default fallback for authentication errors is to render the LoginForm component. So any styles that are applied on the Page itself and not the LoginForm component won't be in scope for the error fallback. You can resolve the issue by moving your style declarations into the LoginForm component instead.

@MrLeebo thank you this fixed the issue for me !

[ajanth97]

Is someone working on a PR to fix this ? If not I'd like to make the fix

[beerose]

@ajanth97 I don't think anyone is working on this issue, I'll assign you :)

[ajanth97]

@beerose thank you !

[flybayer]

Closing, same response as: https://github.com/blitz-js/blitz/issues/3767#issuecomment-1230341547