Admin Pages Create an AuthCheck component to render content for signed-in users

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access


*Enrollment provides full access to this course (and updates) for life.

Auth Check or Route Guard

file_type_js_official components/AuthCheck.js
import Link from 'next/link';
import { useContext } from 'react';
import { UserContext } from '../lib/context';

// Component's children only shown to logged-in users
export default function AuthCheck(props) {
  const { username } = useContext(UserContext);

  return username ? props.children : props.fallback || <Link href="/enter">You must be signed in</Link>;

Usage in a Component

file_type_js_official admin/index.js
import AuthCheck from '../../components/AuthCheck';

export default function AdminPostsPage(props) {
  return (



Ask questions via GitHub below OR chat on Slack #questions