https://github.com/rasyidf/klearn
https://github.com/rasyidf/klearn
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rasyidf/klearn
- Owner: rasyidf
- Created: 2021-12-11T17:22:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-13T02:52:29.000Z (over 3 years ago)
- Last Synced: 2025-01-03T18:47:20.739Z (4 months ago)
- Language: TypeScript
- Homepage: klearn-eight.vercel.app
- Size: 189 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Middleware and Supabase
_([read the blog post about this example](https://jitsu.com/blog/supabase-nextjs-middleware))_
This app demonstrates how new Next.js 12 middleware works along supabase auth. `pages/index.tsx`
is responsible for login logout using supabase-js lib (client side). Once user
logged in, it calls `pages/api/set.ts` to set a server-side cookie containing supabase JWT token.
After logout, `pages/api/remove.ts` is called to clear JWT cookie
Every page inside `pages/app/` is filtered by `pages/app/_middleware.ts`
(see [how Next.js middleware works](https://nextjs.org/docs/middleware)). Middleware validates supabase JWT token (by calling supabase
HTTP API). If the token is absent (=cookie has not been set) or is invalid (auth expired etc),
user will be redirected to login page. Thus, all pages in the `/app` is accessible
only by authorised users
## Deployment and running
The app requires `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_KEY` environment variables to be set. Read more on Supabase Docs
site.
Run the app with `yarn install && NEXT_PUBLIC_SUPABASE_URL="..." NEXT_PUBLIC_SUPABASE_KEY="..." next start`.
Open [localhost:3000](https://localhost:3000) to
access it
## Getting user server-side
See `pages/app/hidden-page.tsx`. In there, supabase user is obtained during
server-side rendering. Since `pages/app/_middleware.ts` has already validated the user.
We don't need to verify JWT with supabase server call, we can just decode JWT
Having user on getServerSideProps we pre-build some data on server (e.g. query user settings
from DB). And we will save an extra request to subapase server client-side
## The bug
This project also reproduces the bug with `supabase-js` lib. See `_middleware.js`. In theory,
if you uncomment `supabase.auth.api.getUserByCookie` and comment `getUser` the app should remain
functinal. However, here's what happens:
```
Authorization error, redirecting to login page ReferenceError: XMLHttpRequest is not defined
at eval (webpack-internal:///./node_modules/cross-fetch/dist/browser-ponyfill.js?d2fb:462:17)
at new Promise ()
at fetch (webpack-internal:///./node_modules/cross-fetch/dist/browser-ponyfill.js?d2fb:455:12)
at eval (webpack-internal:///./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js?85f4:44:63)
at new Promise ()
at eval (webpack-internal:///./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js?85f4:43:16)
at Generator.next ()
at eval (webpack-internal:///./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js?85f4:16:71)
at new Promise ()
at __awaiter (webpack-internal:///./node_modules/@supabase/gotrue-js/dist/module/lib/fetch.js?85f4:12:12)
```