Add login / authentication example
Problem
With: - re-usable authentication helper across pages - session synchronization among tabs - simple passwordless email backend hosted on `now.sh` I think this will be hugely helpful to a lot of newcomers.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Add login / authentication example
So I have auth working swimmingly. As mentioned elsewhere, it's client-side only, which is ultimately just half the battle. "Pretty-secure" Like php, the atomic unit of Next is the page. One of the coolest features is that it lazy loads each page only when it's requested. With client-side only auth but with server-rendering, the js for that protected page is in fact downloaded by the browser. I
Trust Score
12 verifications
- 1
So I have auth working swimmingly. As mentioned elsewhere, it's client-side only
So I have auth working swimmingly. As mentioned elsewhere, it's client-side only, which is ultimately just half the battle.
textNext up is a HOC to make protecting pages simpler. To prevent an unwanted flash of sensitive info, the page will server-render `Loading...` on first render while react boots up / reads the token from localStorage. This means that protected pages will **not** SEO, which is probably okay as of now, but definitely not optimal. - 2
Like php, the atomic unit of Next is the page. One of the coolest features is th
Like php, the atomic unit of Next is the page. One of the coolest features is that it lazy loads each page only when it's requested. With client-side only auth but with server-rendering, the js for that protected page is in fact downloaded by the browser. In the future when Next adds server workflows, you'll hopefully be able to block render and redirect on the server to prevent this entirely. This will require cookies, sessions, and AFAIK session stores, but that's just the cost of doing hybrid apps like these.
- 3
Assume you have a JWT-secured API with two endpoints of interest: `/token` and `
Assume you have a JWT-secured API with two endpoints of interest: `/token` and `/me`. `/token` accepts email/password credentials and returns a signed JWT (`id_token`) while `/me` returns profile information related to the JWT-authenticated user. I adapted the following `AuthService.js` from Auth0's lock (removing event emitter, although that's not the worst idea). It extracts almost all of the JWT token handling so it can be used on the login page and also in a Higher Order Component (more on that later).
- 4
Next up is a HOC to make protecting pages simpler. To prevent an unwanted flash
Next up is a HOC to make protecting pages simpler. To prevent an unwanted flash of sensitive info, the page will server-render `Loading...` on first render while react boots up / reads the token from localStorage. This means that protected pages will not SEO, which is probably okay as of now, but definitely not optimal.
Validation
Resolved in vercel/next.js GitHub issue #153. Community reactions: 375 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep