Implement the first version of SvelteKit project + GitLab OAuth2 connection

[stephane-klein]

Hello,

This is Learn In Public issue.

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:

• sveltekit-passport-oauth2
• and http://www.passportjs.org/

[stephane-klein]

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

[stephane-klein]

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]

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

[stephane-klein]

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]

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]

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

[stephane-klein]

I added this commit 20c8e20 to fix error here

[stephane-klein]

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]

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

[stephane-klein]

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]

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]

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]

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]

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

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

[stephane-klein]

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]

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]

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]

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]

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]

Next task:

• implement logout

[stephane-klein]

In future iteration:

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

[stephane-klein]

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

[stephane-klein]

In next iteration:

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

[stephane-klein]

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

It works in this commit: 21082b6

[stephane-klein]

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]

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]

Next iteration:

• Setup express-passport-middleware in SvelteKit project

[stephane-klein]

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]

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]

I don't know how to debug that thinking 🤔

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

[stephane-klein]

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]

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]

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]

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]

I use this source code to configure OAuth2 parameters.

[stephane-klein]

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]

Todo:

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

[stephane-klein]

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]

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]

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

[stephane-klein]

Issue goal achieved in main branch 😃