Use PAR by janmeier · Pull Request #53 · criipto/criipto-verify-react

janmeier · 2026-03-19T14:40:44Z

This should probably be considered a breaking change, since the PAR request is susceptible to CORS. So if you start on https://login.example.com, and the redirect URL is https://app.example.com, and only https://app.example.com is allowed as redirect URL - the PAR request will be blocked by CORS.

netlify · 2026-03-19T14:40:54Z

✅ Deploy Preview for criipto-verify-react-storybook ready!

Name	Link
🔨 Latest commit	`0e8ca4d`
🔍 Latest deploy log	https://app.netlify.com/projects/criipto-verify-react-storybook/deploys/6a0d963a9e0fd40008dbbc75
😎 Deploy Preview	https://deploy-preview-53--criipto-verify-react-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

janmeier · 2026-03-23T08:49:28Z

Tagging @jlndk for review alongside mhantheman here. Just to easy the review burden on Mick as bit :)

mickhansen · 2026-03-23T09:15:16Z

Few commits would benefit from the "why"

janmeier · 2026-03-23T10:34:09Z

@mickhansen - rdy for re-review. I reworded some commits, so no fixups unfortunately,

jlndk

Looks awesome!

jlndk · 2026-03-23T14:21:14Z

+  width: 24px;
+  height: 24px;
+  border: 3px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;


For visual consistency it may be nice to use a real font-awesome icon instead of using css to make a shape (unless there's some icon being added elsewhere which I can't see in this diff).

I agree, but I don't think we have permission to distribute it :). The spinner we use is part of the pro package

Ah, right!

Probably slightly out of scope, but it would be great if we could set up package resolution such that we can use the free FA icons by default and then overwrite them with the pro packages at distribution-/deploy- time.

Would also be great for docs 🙏🏻

For now I would almost vote for a free icon being better than none. Opinion @Trinurt?

@jlndk The problem is that the free Fontawesome icons do not include Sharp and Light. Maybe we need to make a separate PR/discussion for this issue and look in to smart options?

Fontawesome free icons:

@jlndk The problem is that the free Fontawesome icons do not include Sharp and Light. Maybe we need to make a separate PR/discussion for this issue and look in to smart options?

Fontawesome free icons:

Yes that was my entire point, that we could consider developing with free-regular here in the public repos and then it would be swapped out with the real icons at deploy-time.

But yes, could definitely qualify for out-of-scope in terms of this PR :D @Trinurt

@jlndk How about I add the PRO spinner icon to our custom Fontawesome icon set (takes 10 min) so we can use it for all loading states on all buttons everywhere? (maybe till out of scope for this pr though)

@Trinurt That sounds like it could still violate the terms of redistribution?
Or do you mean you would custom design your own spinner icon - i.e. not extract it from Fontawesome? (What makes something a custom fontawesome icon?)

@janmeier Aye the free we can, the question was whether we can publish an npm package with the pro icons :) I would think probably not.

Definitely not :)

Creators may not make, share, or publish standalone copies of Pro Icons or Pro Software for non-Creators. For the purpose of clarity (and not for limitation), the use of Pro Icons or Pro Icons Software must constitute a new or separate work. Making, sharing, or publishing copies of Pro Icons or Pro Software in a non-transformative way or in a manner where the Pro Icons or Pro Software are the primary part of what is being made, shared, or published is expressly prohibited.

Creators may not give non-Creators permission to Embed Pro Icons in new Projects of their own, or to Embed them in Projects in new ways. Similarly, Creators may not give non-Creators permission to use Pro Icons or Projects that embed Pro Icons for further use or resale.

https://fontawesome.com/license/#what-creators-may-not-do

I think finding a way to use the pro spinner in our own products (ie Verify) is out of scope for this PR.

So we have the following options:

Keep using the existing "moving dots" loader

Use a free font awesome icon everywhere

Use another free CSS spinner (which is have I've done here)

Custom icons are custom icons - I have already made (designed as svg in Figma and uploaded to FA) three custom icons because FA PRO didn't offer the illustration I was looking for.

As for the spinner I can see that I was a little too smart - I can of course not copy the pro and add it to our custom icon kit. But I can design a custom spinner with an IDURA twist and upload it to our custom kit so we can use it on all buttons in all apps and channels. Is that part of this PR though?

But I can design a custom spinner with an IDURA twist and upload it to our custom kit so we can use it on all buttons in all apps and channels.

Sounds like a good way forward.
But out of scope for PR I would say.

janmeier · 2026-03-24T09:38:45Z

@Trinurt Deploy preview updated with HSL, and increasing lightness for FTN and OneID

mickhansen · 2026-04-23T09:01:38Z

Request me when ready again :)

janmeier · 2026-04-28T11:36:33Z

@mickhansen Should be ready for another review now.

I split the disabled state handling into a separate PR, which is already merged.

To recap:

If props.href is not set in AuthMethodButton, we use PAR. I'm guessing that verify might sometimes pass a href, so I left it in
On error, we call context.handleResponse, which bubbles the error to the hook. So any PAR related error will be returned to the consumer there.
In useCriiptoVerify, I am calling fetchCriiptoConfiguration to verify the domain and client id. This should help consumers catch CORS related errors earlier.

janmeier · 2026-05-20T08:10:16Z

🏓 @mickhansen

mickhansen · 2026-05-20T11:07:34Z

@janmeier conflicts

This will allow us to use PAR.

Also known as [pushed authorization request](https://datatracker.ietf.org/doc/html/rfc9126). Pushing the authorization request upfront has several benefits: * Prevents an attacker from modifying OIDC parameters * Does not leak any parameters in logs * Prevents OIDC URLs from growing too large

…loading When we show several buttons together in a group, we want to disable _all_ buttons, when the user clicks one of them. Therefore, we add a disabled state on `AuthButtonGroupContextInterface`. `AuthButtonGroupContextInterface` provides a stub default value, so even if a button is _not_ rendered in a group, it is safe to call `setDisabled()`.

This will try to verify that the domain and client ID are correct, and throw if not. This should be considered a breaking change, since just calling the `useCriiptoVerify` hook will now throw an error, if the domain is not valid.

With the introduction of PAR, we will now always do a CORS request (the /par/init request). So we move the CORS notice further up in the README.

janmeier force-pushed the upgrade-auth-js branch from 75f2ae8 to 4a372c5 Compare March 19, 2026 14:48

janmeier commented Mar 19, 2026

View reviewed changes

Comment thread src/components/AuthMethodButton.tsx

janmeier commented Mar 19, 2026

View reviewed changes

Comment thread src/components/AuthMethodButton.tsx Outdated

janmeier marked this pull request as ready for review March 23, 2026 08:48

janmeier requested review from jlndk and mickhansen March 23, 2026 08:49

mickhansen reviewed Mar 23, 2026

View reviewed changes

Comment thread src/components/AuthMethodButton.tsx Outdated

mickhansen reviewed Mar 23, 2026

View reviewed changes

Comment thread src/provider.tsx Outdated

mickhansen reviewed Mar 23, 2026

View reviewed changes

Comment thread src/components/AuthMethodButton.tsx

janmeier force-pushed the upgrade-auth-js branch 2 times, most recently from aec1b49 to 33afe99 Compare March 23, 2026 10:33

janmeier requested a review from mickhansen March 23, 2026 10:33

jlndk reviewed Mar 23, 2026

View reviewed changes

janmeier requested a review from jlndk March 24, 2026 11:31

janmeier force-pushed the upgrade-auth-js branch 4 times, most recently from c7290b1 to 5dcae51 Compare March 27, 2026 12:56

mickhansen removed their request for review April 23, 2026 09:01

janmeier mentioned this pull request Apr 27, 2026

Styling fixes and disabled state #56

Merged

janmeier force-pushed the upgrade-auth-js branch 4 times, most recently from 9bd8b22 to 79701c1 Compare April 27, 2026 09:27

janmeier force-pushed the upgrade-auth-js branch 5 times, most recently from dbc5ca8 to 17fe9fe Compare April 28, 2026 11:01

janmeier force-pushed the upgrade-auth-js branch 5 times, most recently from c94a34f to d356fa6 Compare April 29, 2026 07:28

janmeier added 5 commits May 20, 2026 13:08

Upgrade @criipto/auth-js.

d90c30d

This will allow us to use PAR.

add(provider): Fetch Criipto configuration on load

f8f6204

This will try to verify that the domain and client ID are correct, and throw if not. This should be considered a breaking change, since just calling the `useCriiptoVerify` hook will now throw an error, if the domain is not valid.

fix(readme): Move CORS notice further up.

0e8ca4d

With the introduction of PAR, we will now always do a CORS request (the /par/init request). So we move the CORS notice further up in the README.

janmeier force-pushed the upgrade-auth-js branch from d356fa6 to 0e8ca4d Compare May 20, 2026 11:08

mickhansen approved these changes May 20, 2026

View reviewed changes

janmeier merged commit 77e2e53 into master Jun 8, 2026
6 checks passed

janmeier deleted the upgrade-auth-js branch June 8, 2026 08:23

Uh oh!

Conversation

janmeier commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for criipto-verify-react-storybook ready!

Uh oh!

Uh oh!

Uh oh!

janmeier commented Mar 23, 2026

Uh oh!

Uh oh!

Uh oh!

mickhansen commented Mar 23, 2026

Uh oh!

Uh oh!

janmeier commented Mar 23, 2026

Uh oh!

jlndk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mickhansen Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Trinurt Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

janmeier commented Mar 24, 2026

Uh oh!

mickhansen commented Apr 23, 2026

Uh oh!

janmeier commented Apr 28, 2026

Uh oh!

janmeier commented May 20, 2026

Uh oh!

mickhansen commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

janmeier commented Mar 19, 2026 •

edited

Loading

netlify Bot commented Mar 19, 2026 •

edited

Loading

mickhansen Mar 25, 2026 •

edited

Loading

Trinurt Mar 25, 2026 •

edited

Loading