igorasilveira

import { useUser, withPageAuthRequired } from "@auth0/nextjs-auth0";
import Head from "next/head";
import Navbar from "../components/Navbar";
import styles from "../styles/Home.module.css";

function Profile({ user, error, isLoading }) {
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;
  
  return (

igorasilveira

export default function Navbar() {
  const { user } = useUser();
  
  return (
    <nav className={styles.nav}>
      <Link href="/">Navbar</Link>
      <div>
        {user ? (
          <div>
            <a style={{ marginRight: 8 }} href="/profile">

igorasilveira

import { useUser } from "@auth0/nextjs-auth0";
import Head from "next/head";
import Navbar from "../components/Navbar";
import styles from "../styles/Home.module.css";

export default function Profile() {
  const { user, error, isLoading } = useUser();
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;
  return (

igorasilveira

export default function Navbar() {
  const { user } = useUser();
  return (
    <nav className={styles.nav}>
      <Link href="/">Navbar</Link>
      <div>
        <button>
          {user ? (
            <a href="/api/auth/logout">Logout</a>
          ) : (

igorasilveira

import Link from 'next/link'; // <- Imported Link from NextJS

export default function Navbar() {
  return (
    <nav className={styles.nav}>
      <Link href="/">Navbar</Link> {/* <- Used here */}
      <div>
        <button>
          <a href="/api/auth/login">Login</a>{" "}
          {/* <- Updated here, we should keep it as an anchor tag for api routes */}

igorasilveira

import '../styles/globals.css'
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

igorasilveira

import { handleAuth } from '@auth0/nextjs-auth0';
export default handleAuth();

igorasilveira

AUTH0_SECRET=<YOUR_AUTH0_SECRET>
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=<YOUR_AUTH0_DOMAIN>
AUTH0_CLIENT_ID=<YOUR_AUTH0_CLIENT_ID>
AUTH0_CLIENT_SECRET=<YOUR_AUTH0_CLIENT_SECRET>

igorasilveira

.nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

igorasilveira

import React from "react";
import styles from "../styles/Navbar.module.css";
export default function Navbar() {
  return (
    <nav className={styles.nav}>
      <a href="/">Navbar</a>
      <div>
        <button>
          <a href="/login">Login</a>
        </button>