Implement the first version of SvelteKit project + GitLab OAuth2 connection #1

stephane-klein · 2022-06-01T05:57:15Z

Hello,

Following this question on Reddit, I created this GitHub repository and this issue, whose goal is to set up a SvelteKit project with a OAuth 2 authentication connected to a self-hosted GitLab instance.

For the moment, I refer to the following resources:

stephane-klein · 2022-06-01T06:10:36Z

I use https://github.com/fh1ch/passport-gitlab2 Passport strategy package.

stephane-klein · 2022-06-01T06:28:16Z

In setup-sveltekit-passport-oauth2-boilerplate branch, I try to follow the sveltekit-passport-oauth2 README instructions.

Here where sequence is imported? See my comment error message here.

stephane-klein · 2022-06-01T07:13:19Z

I am studying https://github.com/fabiohvp/sveltekit-passport-oauth2/blob/master/src/index.ts source code.

stephane-klein · 2022-06-01T07:30:53Z

I read https://kit.svelte.dev/docs/hooks#handle and I don't understand how passport middleware passport.use(setting.strategy); works with SvelteKit Handle 🤔

stephane-klein · 2022-06-01T07:32:29Z

I read https://kit.svelte.dev/docs/hooks#handle and I don't understand how passport middleware passport.use(setting.strategy); works with SvelteKit Handle 🤔

I see https://github.com/sveltejs/kit/issues/1610#issuecomment-906923102

stephane-klein · 2022-06-01T07:53:07Z

I read https://github.com/sveltejs/kit/issues/334.

stephane-klein · 2022-06-01T09:05:32Z

I added this commit 20c8e20 to fix error here

stephane-klein · 2022-06-01T09:06:52Z

Next, I have this error:

Cannot read properties of undefined (reading 'headers')

TypeError: Cannot read properties of undefined (reading 'headers')
    at addUserToRequest (/Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/src/hooks.ts:29:38)
    at apply_handle (file:///Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/@sveltejs/kit/dist/hooks.js:20:11)
    at Object.handle (file:///Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/@sveltejs/kit/dist/hooks.js:10:10)
    at respond (file:///Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/.svelte-kit/runtime/server/index.js:3200:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/@sveltejs/kit/dist/chunks/plugin.js:365:24

here

stephane-klein · 2022-06-01T09:08:46Z

I checked, here request is undefined, I don't know why 🤔

stephane-klein · 2022-06-01T09:13:01Z

I checked, here request is undefined, I don't know why 🤔

In https://kit.svelte.dev/docs/hooks#handle I see that now request is in event parameter.

stephane-klein · 2022-06-01T09:25:44Z

I checked, here request is undefined, I don't know why 🤔

In https://kit.svelte.dev/docs/hooks#handle I see that now request is in event parameter.

Fixed by this commit e78c045

stephane-klein · 2022-06-01T10:52:19Z

Here I read Assuming the following file structure src/hooks.ts and src/routes/auth/google/(login|logout|callback).ts (without json in names).

And here I read routes/auth/google/index.json.ts.

I don't know if the good filename is index.ts or index.json.ts 🤔

I will test index.json.ts.

stephane-klein · 2022-06-01T10:57:48Z

After this commit 8af28ea when I go to http://127.0.0.1:3000/auth/gitlab.json

I have this error:

500

event.path has been replaced by event.url.pathname

Error: event.path has been replaced by event.url.pathname
    at Object.get (file:///Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/.svelte-kit/runtime/server/index.js:3166:10)
    at makeExpressCompatible (/Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/sveltekit-passport-oauth2/lib/cjs/ExpressUtils.js:10:53)
    at new OAuthResponse (/Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/sveltekit-passport-oauth2/lib/cjs/OAuthResponse.js:9:50)
    at /Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/sveltekit-passport-oauth2/lib/cjs/OAuthApis.js:35:26
    at Generator.next (<anonymous>)
    at /Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/sveltekit-passport-oauth2/lib/cjs/OAuthApis.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/sveltekit-passport-oauth2/lib/cjs/OAuthApis.js:4:12)
    at /Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/node_modules/sveltekit-passport-oauth2/lib/cjs/OAuthApis.js:34:25
    at render_endpoint (file:///Users/stephaneklein/git/github.com/stephane-klein/poc-svelte-oauth-passport-gitlab/.svelte-kit/runtime/server/index.js:171:25)

stephane-klein · 2022-06-01T10:59:45Z

I will fork https://github.com/fabiohvp/sveltekit-passport-oauth2 to fix:

event.path has been replaced by event.url.pathname

stephane-klein · 2022-06-03T09:46:39Z

After reading sveltejs/kit#1610, sveltejs/kit#334 and sveltejs/kit#2051 I understand How do I use middleware? better:

I think that https://github.com/fabiohvp/sveltekit-passport-oauth2 implementation is outdated
I think that I can try another approach:
- Setup Passport GitLab OAuth2 with Express (which is more mainstream)
- Integrate SvelteKit site with a middleware, like explained in How do I use middleware?

Next todo:

Setup express + passport connected to GitLab in express-passport branch
Try to setup SvelteKit middleware in Express project

stephane-klein · 2022-06-03T15:11:29Z

This console.log return:

{
  id: '2',
  username: 'stephane-klein',
  ...
  }
}

Now I'm looking for a way to get an access token to the GitLab api 🤔

stephane-klein · 2022-06-03T15:20:39Z

Now I'm looking for a way to get an access token to the GitLab api 🤔

It's ok, this console.log display accessToken which, I think, can be used to perform GitLab api queries.

stephane-klein · 2022-06-03T16:24:35Z

I see that passport-gitlab2 does not do much, it only configures passport-oauth2.

I wonder if it would not be better to use directly passport-oauth2 🤔

Moreover, passport-gitlab2 use the passport-oauth2 1.4.0 version while the last passport-oauth2 version is v1.6.1 🤔

stephane-klein · 2022-06-03T17:29:19Z

I wonder if it would not be better to use directly passport-oauth2 🤔

Done in this commit: 243b3fe

I think, can be used to perform GitLab api queries.

Yes, I confirm that it works 🙂

stephane-klein · 2022-06-03T20:50:41Z

Next task:

implement logout

stephane-klein · 2022-06-04T04:58:37Z

In future iteration:

I would like to test an implementation without passport and use directly https://github.com/ciaranj/node-oauth 🤔

stephane-klein · 2022-06-04T05:07:43Z

I checked if there is a GitHub repository with https://github.com/ciaranj/node-oauth + SvelteKit but I found nothing.

stephane-klein · 2022-06-04T05:11:46Z

In next iteration:

I will convert express-passport to Express middleware in express-passport-middleware branch

stephane-klein · 2022-06-04T05:39:03Z

I will convert express-passport to Express middleware in express-passport-middleware branch

It works in this commit: 21082b6

stephane-klein · 2022-06-04T05:48:25Z

I try to understand how to setup a middleware to Vite by using a Vite plugin.

https://vitejs.dev/guide/api-plugin.html#transformindexhtml

stephane-klein · 2022-06-04T06:04:14Z

I try to understand how to setup a middleware to Vite by using a Vite plugin.

It is easy, this is the commit: 7e74df0

stephane-klein · 2022-06-04T06:05:06Z

Next iteration:

Setup express-passport-middleware in SvelteKit project

stephane-klein · 2022-06-05T20:18:30Z

Setup express-passport-middleware in SvelteKit project

This server.middlewares.use(session); line does not work.

The http://127.0.0.1:3000/ page does not respond, infinite load.

stephane-klein · 2022-06-06T05:44:36Z

Setup express-passport-middleware in SvelteKit project

This server.middlewares.use(session); line does not work.

The http://127.0.0.1:3000/ page does not respond, infinite load.

I don't know how to debug that 🤔

stephane-klein · 2022-06-06T05:46:18Z

I don't know how to debug that thinking 🤔

I'm studying this list https://github.com/sindresorhus/awesome-nodejs#debugging--profiling

stephane-klein · 2022-06-07T05:11:03Z

Setup express-passport-middleware in SvelteKit project

This server.middlewares.use(session); line does not work.

The http://127.0.0.1:3000/ page does not respond, infinite load.

I don't know how to debug that 🤔

I will create a branch with only express-session + svelte-kit and I will post a message to https://github.com/sveltejs/kit/discussions.

stephane-klein · 2022-06-07T05:50:50Z

I will create a branch with only express-session + svelte-kit and I will post a message to https://github.com/sveltejs/kit/discussions.

Question posted here: https://github.com/sveltejs/kit/discussions/5175.

stephane-klein · 2022-06-07T06:02:48Z

While waiting for a https://github.com/sveltejs/kit/discussions/5175 answer, I will test the following new approch:

use directly node-oauth, without passport, without middleware
implement session directly in SvelteKit

stephane-klein · 2022-06-08T05:19:01Z

While waiting for a https://github.com/sveltejs/kit/discussions/5175 answer, I will test the following new approch:

use directly node-oauth, without passport, without middleware

implement session directly in SvelteKit

I will do that in sveltekit-node-oauth branch.

stephane-klein · 2022-06-08T05:45:25Z

I use this source code to configure OAuth2 parameters.

stephane-klein · 2022-06-11T11:14:30Z

I just read node-oauth - Project is active?.

On https://github.com/sindresorhus/awesome-nodejs#authentication, I found this grant lib, I intent to test it.

stephane-klein · 2022-06-11T12:50:22Z

Todo:

Ask in Grant issues if someone have an example to use Grant with Svelte Kit.

stephane-klein · 2022-06-11T13:59:35Z

I think the SvelteKit + Grant implementation will be too difficult for me.

I will try to implement vanilla Authorization code flow, without library 🤷

stephane-klein · 2022-06-11T17:00:06Z

I will try to implement vanilla Authorization code flow, without library 🤷

First iteration done with success in sveltekit-vanilla-authorization-code-flow branch.

Here I get:

{
  access_token: '51c52ed5d0798997d6354f5f17a20...',
  token_type: 'Bearer',
  refresh_token: 'a286979e8dd4921a51ea0a8a048...',
  scope: 'api email profile',
  created_at: 1654254022
}

Todo:

I need to store this token in user session

I will read Sveltekit Authentication post.

stephane-klein · 2022-06-11T18:43:01Z

I read https://github.com/rodneylab/sveltekit-session-cookies

stephane-klein · 2022-06-11T21:45:18Z

Issue goal achieved in main branch 😃

stephane-klein added help wanted Extra attention is needed learn-in-public https://www.swyx.io/learn-in-public labels Jun 1, 2022

stephane-klein added a commit that referenced this issue Jun 1, 2022

Add link to issue #1

26d1cee

stephane-klein mentioned this issue Jun 11, 2022

Do you know an example of Grant setup in SvelteKit project? simov/grant#274

Open

stephane-klein closed this as completed Jun 11, 2022

stephane-klein mentioned this issue Jan 12, 2023

Setup Svelte Kit OAuth2 project connected to Authentik stephane-klein/goauthentik-oauth-poc#1

Open

Implement the first version of SvelteKit project + GitLab OAuth2 connection #1

Implement the first version of SvelteKit project + GitLab OAuth2 connection #1

Comments

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022 • edited Loading

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 1, 2022

stephane-klein commented Jun 3, 2022 • edited Loading

stephane-klein commented Jun 3, 2022

stephane-klein commented Jun 3, 2022

stephane-klein commented Jun 3, 2022

stephane-klein commented Jun 3, 2022

stephane-klein commented Jun 3, 2022 • edited Loading

stephane-klein commented Jun 4, 2022 • edited Loading

stephane-klein commented Jun 4, 2022

stephane-klein commented Jun 4, 2022 • edited Loading

stephane-klein commented Jun 4, 2022

stephane-klein commented Jun 4, 2022 • edited Loading

stephane-klein commented Jun 4, 2022 • edited Loading

stephane-klein commented Jun 4, 2022

stephane-klein commented Jun 5, 2022 • edited Loading

stephane-klein commented Jun 6, 2022

stephane-klein commented Jun 6, 2022

stephane-klein commented Jun 7, 2022

stephane-klein commented Jun 7, 2022

stephane-klein commented Jun 7, 2022

stephane-klein commented Jun 8, 2022

stephane-klein commented Jun 8, 2022

stephane-klein commented Jun 11, 2022

stephane-klein commented Jun 11, 2022 • edited Loading

stephane-klein commented Jun 11, 2022

stephane-klein commented Jun 11, 2022

stephane-klein commented Jun 11, 2022

stephane-klein commented Jun 11, 2022

stephane-klein commented Jun 1, 2022 •

edited

Loading

stephane-klein commented Jun 3, 2022 •

edited

Loading

stephane-klein commented Jun 3, 2022 •

edited

Loading

stephane-klein commented Jun 4, 2022 •

edited

Loading

stephane-klein commented Jun 4, 2022 •

edited

Loading

stephane-klein commented Jun 4, 2022 •

edited

Loading

stephane-klein commented Jun 4, 2022 •

edited

Loading

stephane-klein commented Jun 5, 2022 •

edited

Loading

stephane-klein commented Jun 11, 2022 •

edited

Loading