Auth0.js: Guidance for proper tree shaking

[NathanielHill]

I notice no bundle size difference between:

import { WebAuth } from 'auth0-js'

and

import auth from 'auth0-js'

I get a final bundled size of 30.52kB. I suppose there could be a problem with my setup.

Could you consider adding guidance on how to implement tree shaking, or at the very least note which imports are available. All the docs I've seen so far simply import the default export.

[luisrudge]

You won't notice any improvements because most of our dependencies are not three shaked either. Also, WebAuth imports pretty much everything else (except Management), so it's the biggest export we have.

We're exporting correctly (https://github.com/auth0/auth0.js/blob/master/src/index.js), but still need to work on actually using three shaking inside the library.

[NathanielHill]

It would be really helpful if I could just import what I need. I literally construct an instance of the class and then use three methods. 30kB seems insane for my use case, and I imagine mine is pretty common.

[luisrudge]

@NathanielHill what methods do you use?

[NathanielHill]

@luisrudge I'm using authorize, parseHash, and checkSession

[luisrudge]

@NathanielHill then you'll love the secret project that we're working on 🎉 I'll keep you posted. Can I reach out to the email address in your profile?

[NathanielHill]

@luisrudge Sure.

I've considered just implementing those methods myself, can't imagine it would take more than a kilobyte or two..

[luisrudge]

Most of the size is actually because of parseHash, which uses the idtoken-verifier package: https://bundlephobia.com/result?p=idtoken-verifier

[NathanielHill]

Which is using superagent which gives me tons of SSR warnings during development.

Is parseHash actually sending another network request to verify the token?

[NathanielHill]

That doesn't seem completely necessary. If the site I'm redirecting to is compromised, seemed like it's already game over. Can it verify locally? I think jsonwebtoken is like 7kB

[luisrudge]

it does a request if your id_token uses the RS256 algorithm, since it needs to fetch the public keys here: https://{tenant}.auth0.com/.well-known/jwks.json (example: https://brucke.auth0.com/.well-known/jwks.json)

[NathanielHill]

Seems like an argument for HS256 to me. Superagent is a killer right there. There are fetch solutions on the order of half a kB. Seems idtoken-verifier is the low hanging fruit

[luisrudge]

You can't verify HS256 tokens from single page applications though, that's why we issue RS256 tokens for this type of clients.

We have plans to migrate away from superagent in both idtoken-verifier and auth0.js, we just have other priorities right now (the super secret project ™️ I mentioned before).

[NathanielHill]

Glad I'm at least not using auth0-lock... 18 levels of <div>s to get to a button!

[luisrudge]

what can I say? we love divs 🎉

[NathanielHill]

Hope you've got an accessibility expert on hand for that. I pity the screen reader that's gotta parse it

[luisrudge]

I just tested replacing superagent by unfetch, but unfetch requires a promise polyfill, so the end result is not THAT impactful:

master

┌─────────────────────────┬───────────┬───────────┐
│ File                    │ Size      │ GZIP size │
├─────────────────────────┼───────────┼───────────┤
│ idtoken-verifier.js     │ 144.40 kb │ 35.02 kb  │
├─────────────────────────┼───────────┼───────────┤
│ idtoken-verifier.min.js │ 50.24 kb  │ 17.01 kb  │
└─────────────────────────┴───────────┴───────────┘

unfetch + promise polyfill

┌─────────────────────────┬───────────┬───────────┐
│ File                    │ Size      │ GZIP size │
├─────────────────────────┼───────────┼───────────┤
│ idtoken-verifier.js     │ 120.29 kb │ 29.29 kb  │
├─────────────────────────┼───────────┼───────────┤
│ idtoken-verifier.min.js │ 41.73 kb  │ 14.90 kb  │
└─────────────────────────┴───────────┴───────────┘

We'll evaluate the change anyway, feel free to follow the PR here:https://github.com/auth0/idtoken-verifier/pull/27

[sseppola]

Are there any easy wins for people using WebAuth in 2020?

Currently I'm just using:

• webAuth.redirect.signupAndLogin
• webAuth.login
• webAuth.changePassword

These is all we use after customizing our universal login page using parcel, svelte, and auth0-js, with pretty good results.
I inline all the code so I can paste it into the editor, which is 146KB raw and 44KB gzipped.

[bboydflo]

would also like to hear/know more about the super secret project. I am in the same situation as @NathanielHill and it seems a bit overkill for a couple of methods that I use.

Has anyone been able to cut off the size of auth0.js?