A demonstration of Authentication with Sapper. This example is intentionally simple, but demonstrates a basic auth flow with JWT, secure cookies, and Sapper.
Includes:
- JWT
- Secure cookies
- HTTP Only cookies
cd server
npm i
cd ..
npm i
npm run dev
A demonstration of Auth with Sapper + JWT + Server Side Rendering + RBAC
I downloaded the repo and npm i on both backend and root an getting the error below.
✗ client
'import' and 'export' may only appear at the top level
11: }
12:
13: export function connect(port) {
^
14: if (source || !window.EventSource) return;
✗ server
'import' and 'export' may only appear at the top level
11: }
12:
13: export function connect(port) {
^
14: if (source || !window.EventSource) return;
✔ service worker (188ms)
internal/modules/cjs/loader.js:969
throw err;
^
Error: Cannot find module '/storage/sapper-authentication-demo-master/__sapper__/dev/server/server.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:17)
at Function.Module._load (internal/modules/cjs/loader.js:859:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
> Server crashed
Sometimes, I need client request get some json data, like ajax.
How should I do for jwt auth?
client ajax request -> backend
client ajax request -> sapper(jwt) -> backend
Thanks!
example if I go to http://localhost:3000/admin I could still see that rout with out been authorize.
Hello,
IIUC, the server will accept any JWT.
const profile = token ? jwt.decode(token) : false;
// omitted code
authenticated: !!profile
If so, this is a big security vulnerability in what seems to be one of the most widely cited examples of implementing auth for Sapper applications. I think we should update the example to use jwt.verify
.
Thank you! I really enjoyed the talk and have now watched it twice. I think this is a much-needed resource—certainly much-needed by me.
I was having some trouble getting the /whoami route to work. I think there may be two issues, but I'm certainly not an expert:
The validate function in the strategy configuration seems to be expecting the decoded JWT to contain an id, a role, and a scope. In the example, however, the JWT is created with an email, scope, and name. This seems to be a mismatch.
Because there is no default auth configured (server.auth.default) and because auth is not configured for the /whoami route (config: {auth: "jwt"}), I think that that request.auth.credentials will always be null. I kept getting a 204 ("No Content") response, for example, whether I was signed in or not. To get the route to pipe the token through the authentication strategy, I configure authentication for the route (config: {auth: "jwt"}). But that caused me to get an "invalid_token" response. Digging into the hapi-auth-jwt2 documentation, I saw that setting the key is a required field. Setting that to my secret key seems to have fixed the issue. I know that you said in the talk that in a production app you would, of course, verify the token and, if invalid, sign the user out. It might be helpful to add those details to this demo. I realize that you are trying to keep things as simple as possible, but it would seem that verifying the JWT is essential to an authentication example.
Again, I'm certainly not an expert. Even if I'm missing something basic here, I hope that this question will be helpful to others who may be wondering about the same things. And thank you again for putting together this demo and for doing the talk.
Hi,
I can easily run the project in giant mode. There is no problem but the sessions are not updated when I run the project in build mode. When I log out and log in to another user type, old data remains on the screen. I need to refresh the page from chrome for the session update. By the way, I did not make the slightest change in the project.
My build process;
npm run build -> in main directory
npm start -> in main directory
node server.js -> in backend/ directory.
Will be very cool to have a complete auth example with Svelte Kit :)
Hi,
when I do a yarn dev doesn't work, it gives me back:
Error: Cannot find module '@hapi/hapi'
I don't understand if I should install it on my own, because in your video I don't see that it takes
First of all thank you for putting this together, I am managing my jwt-token in the client side of sapper and found your tutorial witch is awesome and necessary to clear my head about having client and server running for a front end ;)
Back end server won't start for me.
/Users/oscar/Downloads/sapper-authentication-demo-master/backend/node_modules/@hapi/hapi/lib/core.js:51
actives = new WeakMap();
SyntaxError: Unexpected token =
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/Users/oscar/Downloads/sapper-authentication-demo-master/backend/node_modules/@hapi/hapi/lib/server.js:9:14)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
polka()
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
cookieParser(),
(req, res, next) => {
const token = req.cookies['my-jwt']
const profile = token ? jwt.decode(token) : false
https://github.com/antony/sapper-authentication-demo/blob/master/src/server.js
Is this safe? The client can construct jwt that can be decoded.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.