Pro Jokes¶

In this problem set, we'll build a web app called Pro Jokes using Next.js and Firebase. Our platform has jokes, but users need to sign up to read the punchlines.

Goals¶

The goal of this project is to answer the following questions.

How do I register users with email and password?
How do I register users with an OAuth provider?
How do I handle log in and log out functionality?
How do I make users verify their email?
How do I let users reset their password?
How do I collect extra information from users on signup?
How do I protect content from unauthenticated users?

Our finished product will be ugly (kind of like yo mamma), but our focus is on functionality not style.

Stack¶

Next.js version: 13.1.6
Firebase Javascript SDK version: 9.16.0
Typescript: no
ESLint: no
src/ directory: no
app/ directory: yes

Setup¶

Create a new Next.js app named pro-jokes with create-next-app.
```
npx create-next-app@latest pro-jokes
```

Delete the following files and directories, as they won't be needed (yet).

BeforeAfter

.git/
.gitignore
app/
  globals.css
  head.jsx
  layout.jsx
  page.jsx
  page.module.css
jsconfig.json
node_modules/
  ...
package-lock.json
package.json
pages/
  api/
    hello.js
public/
  favicon.ico
  next.svg
  thirteen.svg
  vercel.svg
README.md

.git/
.gitignore
app/
  head.jsx
  layout.jsx
  page.jsx
jsconfig.json
node_modules/
  ...
package-lock.json
package.json
README.md

(If you prefer, you may also delete .git/, .gitignore, and README.md.)