How do I acces headers?

[Milo123459]

Hey! I'm working on a worker that needs to get a token from an authorization header, and I couldn't figure out how to do it with itty-router. Please let me know if you know how!

[kwhitley]

Here's an example from my own auth layer (within Workers):

// middleware/withAuthenticatedUser.js
import jwt from 'jsonwebtoken'
import { error } from 'itty-router-extras'
import { User } from './User' // external User class, unimportant what it actually does

const JWT_SECRET = 'something super secret'

export const withAuthenticatedUser = request => {
  try {
    const authHeader = request.headers.get('authorization')
    const token = authHeader.replace(/^Bearer\s/i, '')
    const decoded = jwt.verify(token, JWT_SECRET)
    req.user = new User(decoded.user) // should throw if no user
  } catch (err) {
    return error(401, 'Unauthorized') // this will prematurely exit itty handlers and return a 401
  }
}

// index.js
import { Router } from 'itty-router'
import { error, missing, json } from 'itty-router-extras'
import { withAuthenticatedUser } from './middleware/withAuthenticatedUser'

const router = Router()

router
  .all('*', withAuthenticatedUser)
  .get('/pets', ({ user }) => json(user.pets))
  .all('*', () => missing('Are you sure about that?')

export default {
  fetch: (...args) => router
                        .handle(...args)
                        .catch(error)
}

/* 
EXAMPLES:
/pets (without token)  --> 401: Unauthorized
/pets (with token)     --> ['mittens', 'fluffy', 'bitey']
/foo (without token)   --> 401: Unauthorized
/foo (with token)      --> 404: Are you sure about that?
*/

Hope this helps! Def something to add to the Wiki once I get around to making it :)

[Milo123459]

Thank you!

[Milo123459]

Hey, sorry for bumping this! Would you mind sharing how you use authentication on the client? Ie, on a web app? I'm not sure how to do it securely.

[kwhitley]

I need to re-wrap my head around how I did it for Slick.af - it was a pioneering lesson in SPA + serverless auth architecture, and not gonna lie, it was challenging. As this is a common practice, and I still haven't seen any good/elegant solution to solving it (yet, and I need to do more research), I'm considering making an easy plug-and-play library to connect the pieces.

Once I recall how I did it, I'll try to remember to post back here! Likewise, if you find a good solution/template/blog or whatever that describes an easy oauth process Workers and a SPA, i'm all ears!

[andrekutianski]

maybe an auth0 integration can help to get an elegant solution for auth?

Cloudflare has an (unpublished) tutorial https://web.archive.org/web/20220130044804/https://developers.cloudflare.com/workers/tutorials/authorize-users-with-auth0

[osseonews]

Very interesting, as I am building the same thing. BTW, you may want to checkout Clerk.dev. It's incredible. And you can easily send the JWT to Cloudflare and then authenticate with Clerks own Edge functions. Its a very easy integration with Cloudflare and solves many issues with auth.

[kwhitley]

I've definitely found clerk.dev during my research phase while building otpgarden.com. They're more or less building the same thing I was, with some differences, but they have funding and a 4 year head start.

Now, an advantage my system has is being truly cross-device (it's a 3-way socket for connections), but they have loads of integrations that I haven't even started on. Super cool system though.