docs: update readme for nextauth v5 beta

apps/course-builder-web/.env.development.local.example

@@ -0,0 +1,18 @@
+# Database
+# Specify a custom URL if you want to connect to your own database
+# DATABASE_URL="mysql://..."
+
+# Next Auth
+# You can generate a new secret on the command line with:
+# openssl rand -base64 32
+# https://next-auth.js.org/configuration/options#secret
+NEXTAUTH_SECRET="set-secret-here"
+
+# for webhooks use ngrok or similar for stable DNS accessible URL
+NEXTAUTH_URL="https://some-subdomain.ngrok-free.app/api/auth"
+UPLOADTHING_URL="https://some-subdomain.ngrok-free.app"
+NEXT_PUBLIC_URL="https://some-subdomain.ngrok-free.app"
+
+# Github
+GITHUB_CLIENT_ID="github-client-id"
+GITHUB_CLIENT_SECRET="github-client-secret"

apps/course-builder-web/README.md

@@ -117,6 +117,8 @@ For those with access to the project in Vercel, here is how to grab those env va
     - If for some reason you are needing environment variables for a different environment, you can include the `--environment` flag in the above command like so:
       - `vercel env pull --environment=preview`
 
+_Note: Because of [Next.js Enviornment Variable Load Order](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#environment-variable-load-order), the `.env.local` file generated in this step will override many values that you may want to set in the `.env` or `.env.development` files. Any env vars in development that you want to take precedence over what is in `.env.local` will need to go in `.env.local.development`._
+
 ### Install dependences
 
 Make sure you have [`pnpm`](https://pnpm.io/) installed.
@@ -137,34 +139,37 @@ $ ngrok http 3000
 
 Note: with a free account, this URL will change each time you restart the `ngrok` command, so make sure to update it in the relevant places when that happens.
 
-Grab this URL because you'll need it for a couple `.env` values and for the _GitHub OAuth Setup_.
+Grab this URL because you'll need it for a couple `.env.development.local` values and for the _GitHub OAuth Setup_.
 
-Set the following URLs in your `.env`:
+Set the following URLs in your `.env.development.local`:
 
 ```
 # for webhooks use ngrok or similar for stable DNS accessible URL
-NEXTAUTH_URL="https://some-unique-value.ngrok-free.app"
+NEXTAUTH_URL="https://some-unique-value.ngrok-free.app/api/auth"
 UPLOADTHING_URL="https://some-unique-value.ngrok-free.app"
 NEXT_PUBLIC_URL="https://some-unique-value.ngrok-free.app"
 ```
 
+_Note: `NEXTAUTH_URL` now needs to end in `/api/auth` for NextAuth v5._
+
 ### GitHub OAuth Setup
 
 This app uses GitHub as its OAuth provider. For local development, you'll need to create your own GitHub OAuth Application.
 
 You can create one by visiting the [_Register a new OAuth Application_](https://github.com/settings/applications/new) and following these steps:
 
 - 1. Give it an application name, e.g. "Bob's Local Course Builder"
-- 2. Set the Homepage URL and Authorization callback URL to the `ngrok` URL you got in the previous section
-- 3. No need to give a Description or check Enable Device Flow
-- 4. Click 'Register Application'
+- 2. Set the Homepage URL to the `ngrok` URL you got in the previous section
+- 3. Set the Authorization callback URL to match the `NEXTAUTH_URL` set in the previous section
+- 4. No need to give a Description or check Enable Device Flow
+- 5. Click 'Register Application'
 
 You will now be dropped on your OAuth Application page where you can:
 
 - 1. Copy the Client ID into the `GITHUB_CLIENT_ID` env var
 - 2. Generate a Client Secret and copy it into the `GITHUB_CLIENT_SECRET` env var
 
-These can both go in `.env`.
+These can both go in `.env.development.local`.
 
 ### Database Setup