benjaminramey/forgetmenot-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auth0 working!

Browse Source
This commit is contained in:
Benjamin Ramey
2022-05-11 09:23:32 -05:00
parent 002c6a2f3d
commit 4c37658cd8
14 changed files with 782 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/pages/about.js Normal file
View File

@@ -0,0 +1,19 @@
import Layout from "../components/layout";
import { useFetchUser } from "../lib/user";
function About() {
const { user, loading } = useFetchUser();
return (
<Layout user={user} loading={loading}>
<h1>About</h1>
<p>
This is the about page, navigating between this page and <i>Home</i> is
always pretty fast. However, when you navigate to the <i>Profile</i>{" "}
page it takes more time because it uses SSR to fetch the user first;
</p>
</Layout>
);
}
export default About;

37
web/pages/advanced/ssr-profile.js Normal file
View File

@@ -0,0 +1,37 @@
// This import is only included in the server build, because it's only used by getServerSideProps
import auth0 from "../../lib/auth0";
import Layout from "../../components/layout";
function Profile({ user }) {
return (
<Layout user={user}>
<h1>Profile</h1>
<div>
<h3>Profile (server rendered)</h3>
<img src={user.picture} alt="user picture" />
<p>nickname: {user.nickname}</p>
<p>name: {user.name}</p>
</div>
</Layout>
);
}
export async function getServerSideProps({ req, res }) {
// Here you can check authentication status directly before rendering the page,
// however the page would be a serverless function, which is more expensive and
// slower than a static page with client side authentication
const session = await auth0.getSession(req, res);
if (!session || !session.user) {
res.writeHead(302, {
Location: "/api/login",
});
res.end();
return;
}
return { props: { user: session.user } };
}
export default Profile;

10
web/pages/api/callback.js Normal file
View File

@@ -0,0 +1,10 @@
import auth0 from "../../lib/auth0";
export default async function callback(req, res) {
try {
await auth0.handleCallback(req, res);
} catch (error) {
console.error(error);
res.status(error.status || 500).end(error.message);
}
}

10
web/pages/api/login.js Normal file
View File

@@ -0,0 +1,10 @@
import auth0 from "../../lib/auth0";
export default async function login(req, res) {
try {
await auth0.handleLogin(req, res);
} catch (error) {
console.error(error);
res.status(error.status || 500).end(error.message);
}
}

10
web/pages/api/logout.js Normal file
View File

@@ -0,0 +1,10 @@
import auth0 from "../../lib/auth0";
export default async function logout(req, res) {
try {
await auth0.handleLogout(req, res);
} catch (error) {
console.error(error);
res.status(error.status || 500).end(error.message);
}
}

10
web/pages/api/me.js Normal file
View File

@@ -0,0 +1,10 @@
import auth0 from "../../lib/auth0";
export default async function me(req, res) {
try {
await auth0.handleProfile(req, res);
} catch (error) {
console.error(error);
res.status(error.status || 500).end(error.message);
}
}

94
web/pages/index.js
View File

@@ -1,69 +1,37 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Layout from "../components/layout";
import { useFetchUser } from "../lib/user";
function Home() {
const { user, loading } = useFetchUser();
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App: Testing Update 2</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Layout user={user} loading={loading}>
<h1>Next.js and Auth0 Example</h1>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
{loading && <p>Loading login info...</p>}
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
{!loading && !user && (
<>
<p>
To test the login click in <i>Login</i>
</p>
<p>
Once you have logged in you should be able to click in{" "}
<i>Profile</i> and <i>Logout</i>
</p>
</>
)}
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
{user && (
<>
<h4>Rendered user info on the client</h4>
<img src={user.picture} alt="user picture" />
<p>nickname: {user.nickname}</p>
<p>name: {user.name}</p>
</>
)}
</Layout>
);
}
export default Home;

31
web/pages/profile.js Normal file
View File

@@ -0,0 +1,31 @@
// This import is only needed when checking authentication status directly from getInitialProps
// import auth0 from '../lib/auth0'
import { useFetchUser } from "../lib/user";
import Layout from "../components/layout";
function ProfileCard({ user }) {
return (
<>
<h1>Profile</h1>
<div>
<h3>Profile (client rendered)</h3>
<img src={user.picture} alt="user picture" />
<p>nickname: {user.nickname}</p>
<p>name: {user.name}</p>
</div>
</>
);
}
function Profile() {
const { user, loading } = useFetchUser({ required: true });
return (
<Layout user={user} loading={loading}>
{loading ? <>Loading...</> : <ProfileCard user={user} />}
</Layout>
);
}
export default Profile;