In the previous lecture, we added the (auth) route group and an auth-only layout (by adding a layout.js file in that (auth) folder).
Currently, this (auth)/layout.js layout will actually not replace the main root layout (i.e., the layout provided by app/layout.js).
Because route group layouts are actually nested into the main root layout unless there is no such root layout. I.e., if you would create another route group (e.g., (unauth)) and move the layout.js file into that folder, you would end up with multiple root layouts.
Therefore, if you're not doing that, you should edit the (auth)/layout.js file and remove the <html> and <body> elements in there. The app will work either way but it's technically incorrect.
Instead, your (auth)/layout.js file should look like this:
import '../globals.css';
export const metadata = {
title: 'Next Auth',
description: 'Next.js Authentication',
};
export default function AuthRootLayout({ children }) {
return (
<>
<header id="auth-header">
<p>Welcome back!</p>
<form>
<button>Logout</button>
</form>
</header>
{children}
</>
);
}