How to show a marketing page or a dashboard at / depending on authentication #5391

tmcw · 2023-02-08T00:02:05Z

tmcw
Feb 8, 2023

Right now, all of the Remix examples I can find of authenticated routes start with the assumption that you'll redirect unauthenticated users away from a given route, like /, to a login route, like /login. It's much more common that a website will support unauthenticated users visiting /. If you go to https://github.com/ unauthenticated, you get the marketing website. If you're authenticated, you get your feed.

It's not obvious so far how to do this in Remix. Maybe I could fetch the user's logged-in state in a loader and then render one route or another, but then we run into the issue of layouts - the authenticated version of the page probably wants to have a layout route with the user's avatar and stuff on it. The unauthenticated version doesn't. How do you render "another route" from a route in Remix? So far I haven't found docs for that.

So: what kind of patterns might work for rendering both a "marketing site" and a "logged in dashboard" at /, with Remix?

Any help much appreciated!

sergiodxa · 2023-02-08T00:08:06Z

sergiodxa
Feb 8, 2023
Maintainer

What you need to do is to branch your code in both loader and UI.

export async function loader({ request }: DataFunctionArgs) {
  let isAuthenticated = getAuthenticatedUser(request);

  if (isAuthenticated) {
    // run code to get user home page data and return a response
  }

  // run code to get the public data and return a response
}

export default function Component() {
  let loaderData = useLoaderData<typeof loader>()

  if (loaderData.type === "home") return <Home />
  return <Login />
}

If you're using React 18, you could use React.lazy and dynamic imports to import Home and Login components, this way if the user is authenticated it will not download the JS for Login and if it's not authenticated it will not download the JS for Home.

If you don't add a Suspense boundary around those component React will render the Home or Login UI on SSR.

3 replies

tmcw Feb 8, 2023
Author

Thanks! That's super helpful. I'm still struggling a bit with the problem around layouts - can't connect the dots for how to, say "render the authenticated layout route with <Home /> in its outlet"?

deadcoder0904 Jan 19, 2024

@tmcw did you figure it out? i have the same question.

/ route should show dashboard when authenticated otherwise homepage.

michaelboyles Jul 23, 2024

"If you're using React 18, you could use React.lazy and dynamic imports to import Home and Login components"

This sort of works, but CSS bundles are no longer present in the SSR'd HTML. They only get added when the client is hydrated. The result is a flash of unstyled content when the page loads.

deadcoder0904 · 2024-01-19T13:58:36Z

deadcoder0904
Jan 19, 2024

@sergiodxa how do i share Outlet with my /login route?

import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"
import {
	Links,
	LiveReload,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration,
	useLoaderData,
} from "@remix-run/react"

import styles from "./styles/tailwind.css"

export const links: LinksFunction = () => [
	{
		rel: "stylesheet",
		href: styles,
	},
]

export const loader = async ({ request }: LoaderFunctionArgs) => {
	const isAuthenticated = false // getAuthenticatedUser(request)

	if (isAuthenticated) {
		// run code to get user home page data and return a response
		return {
			type: "dashboard",
		}
	}

	// run code to get the public data and return a response
	return {
		type: "signup",
	}
}

const SignUp = () => (
	<>
		<h1>SignUp</h1>
	</>
)

const Dashboard = () => (
	<>
		<h1>Dashboard</h1>
	</>
)

const App = () => {
	const loaderData = useLoaderData<typeof loader>()

	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<Meta />
				<Links />
			</head>
			<body>
				{loaderData.type === "signup" ? <SignUp /> : <Dashboard />}
				<Outlet />
				<ScrollRestoration />
				<Scripts />
				<LiveReload />
			</body>
		</html>
	)
}

export default App

0 replies

starkblaze01 · 2024-01-19T14:08:23Z

starkblaze01
Jan 19, 2024

This might help: https://stackoverflow.com/a/77846674/9543932

6 replies

deadcoder0904 Jan 19, 2024

yo bdw i think what you are saying is exactly what i have done. i just did it in root.tsx instead of _index.tsx but that still doesn't answer my original question.

what to do of Outlet? do i remove it? because if i remove it, /login route won't get all the html, head tags so that's my question. what you have answered is what i've already understood with the original code block.

deadcoder0904 Jan 19, 2024

i think i got it. you modified the example a bit & used different names so i got confused.

so i copy-pasted the code you said on stackoverflow & got dashboard route showing on authentication & login route showing when not authenticated.

i'll probably modify it according to my application & paste the answer. i don't think i got it yet but gonna read up the routing convention a bit. thanks for the help :)

starkblaze01 Jan 19, 2024

If you mention the Outlet it will render the Home/SignUp page + the Child pages in route, so better put Outlet in the Home.
The routing in the remix happens with the files in the route folder: https://interactive-remix-routing-v2.netlify.app/.
You will get a hang of it eventually, play around with file names a bit.
The route.ts file points to /route route, route.abc.xyz.ts points to route/abc/xyz route.
Anything with _ prefix in the file name get ignored in the URL. So, _index.ts file refers to / route, also _abc.ts and _xyz.ts will also point to / route but Remix will throw an error that multiple files pointing to same route.
Another e.g. _index.abc.xyz points to /abc/xyz route.
Now the Outlet is for rendering the child pages in the route.
You can also do it like this:
Create three files:
login.ts, _index.ts, _index.autheticated pages.ts
In the _index.ts file loader you can do something like this after your authentication check in the loader:

import {
  redirect,
  type LoaderFunctionArgs,
} from '@remix-run/node';

export const loader = async ({ request }: LoaderFunctionArgs) => {
	const isAuthenticated = false // getAuthenticatedUser(request)

	if (!isAuthenticated) {
		return redirect('/login');
	}
	return null
}

So basically you create all the authenticated pages with _index prefix in the file name so the loader of _index is called(/ url is hit) and if the user is not authenticated just redirect it to /login or login.ts file. You don't have to check the authentication thing on the client side in the component.

deadcoder0904 Jan 19, 2024

regarding your last code block, it wouldn't show signup page on /, right? because it redirects to /login

starkblaze01 Jan 19, 2024

Yes exactly, you can create sign-up.ts file and replace login with it. It will re-direct to /sign-up accordingly.

deadcoder0904 · 2024-01-20T04:31:06Z

deadcoder0904
Jan 20, 2024

for anyone in future looking for a copy-paste answer, this is how you do it.

edit: its way too complicated when you add authentication & sessions to it so i went with /dashboard instead & redirects when user session exists. that does the job & is very simpler.

0 replies

How to show a marketing page or a dashboard at / depending on authentication #5391

Uh oh!

Replies: 4 comments · 9 replies

Uh oh!

sergiodxa Feb 8, 2023 Maintainer

Uh oh!

tmcw Feb 8, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 4 comments 9 replies

sergiodxa
Feb 8, 2023
Maintainer

tmcw Feb 8, 2023
Author