🛑 Admin Pages

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

Client-side security logic will keep your app 100% secure?

Auth Check or Route Guard

file_type_js 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 admin/index.js 
import AuthCheck from '../../components/AuthCheck';


export default function AdminPostsPage(props) {
  return (
    <main>
      <AuthCheck>

      </AuthCheck>
    </main>
  );
}

Questions? Let's chat

Open Discord