This project is intended to showcase how to use Next.js with the new version of SST (Ion) and the SST Auth.
I did this since right now, the new version of SST was launched, but the docs for the SST Auth in that version don't exist yet; so I wanted to create a basic example for everyone until the official docs and examples are out.
Just keep in mind I did this as an example, which might not follow all the best practices nor be production-ready, so if you use it for your project, do your own work to make it production-ready!
The project uses a Pnpm Monorepo. I created the base project using https://github.com/sst/monorepo-template/tree/main and converted it to use Pnpm Workspaces.
-
Clone this repo.
-
Cd into the root folder of this repo.
-
Go to GitHub and create a new OAuth app: https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app . In the
Homepage URLset for nowhttp://localhost:3000and in theAuthorization callback URLset the Auth lambda URL you will get after the first launch (withnpx sst dev). After creating the OAuth app, save the Client ID and the Client Secret. -
Run
pnpm ito install the dependencies. -
Run
npx sst devto do the initial setup. Once it is deployed, kill it. -
Run
npx sst secret set GithubClientID <the client ID you copied in the step 4>. -
Run
npx sst secret set GithubClientSecret <the client Secret you copied in the step 4> -
Run again
npx sst devand once it is ready, accesshttp://localhost:3000, your project should be working!
To create this example, I used several resources you might find interesting:
- The old SST v2 Auth docs: https://docs.sst.dev/auth
- This Gist in Svelte from Matt Kinnersley: https://gist.github.com/mattkinnersley/9aa751dc7ea115cdebbe2bf44a068ec7
- The readme and source code from the
future/authpackage from SST: https://github.com/sst/sst/tree/master/packages/sst/src/node/future/auth - This implementation in React (with Vite, client side): https://gist.github.com/amosbastian/e37fa8aefe1aef7d866da261bf20dfdf