Skip to content

feat(clerk-js,types,clerk-react): Support Coinbase Wallet web3 provider and authentication strategy #4082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Sep 3, 2024
Merged

feat(clerk-js,types,clerk-react): Support Coinbase Wallet web3 provider and authentication strategy #4082

merged 1 commit into from
Sep 3, 2024

Conversation

@chanioxaris
Copy link
Member

@chanioxaris chanioxaris commented Sep 3, 2024 •
edited
Loading

Description

Coinbase Wallet is a new generic web3 provider and strategy that supports both Smart Wallets and Coinbase Wallet browser extension. Users can use it to authenticate themselves using their own web3 address as an identifier

In order to take advantage of the Coinbase Wallet we are lazy loading @coinbase/wallet-sdk and all its direct dependencies. Resulting in a new chunk ~58KB which will only be loading when the end user selects that provider.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot
Copy link

changeset-bot bot commented Sep 3, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 44de48c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages
Name Type
@clerk/clerk-js Minor
@clerk/clerk-react Minor
@clerk/types Minor
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
@clerk/elements Patch
@clerk/nextjs Patch
@clerk/remix Patch
@clerk/tanstack-start Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/localizations Patch
@clerk/clerk-sdk-node Patch
@clerk/shared Patch
@clerk/testing Patch
@clerk/themes Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

chanioxaris
chanioxaris commented Sep 3, 2024
View reviewed changes
packages/clerk-js/package.json
"@clerk/localizations": "2.8.0",
"@clerk/shared": "2.6.1",
"@clerk/types": "4.18.0",
"@coinbase/wallet-sdk": "4.0.4",
Copy link
Member Author

@chanioxaris chanioxaris Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to reviewers: For now this is lazy loaded with the help of @panteliselef

@chanioxaris chanioxaris changed the title feat(clerk-js,types,react): Support Coinbase Wallet web3 provider and… feat(clerk-js,types,react): Support Coinbase Wallet web3 provider and authentication strategy Sep 3, 2024
@chanioxaris chanioxaris changed the title feat(clerk-js,types,react): Support Coinbase Wallet web3 provider and authentication strategy feat(clerk-js,types,clerk-react): Support Coinbase Wallet web3 provider and authentication strategy Sep 3, 2024
octoper
octoper approved these changes Sep 3, 2024
View reviewed changes
Copy link
Member

@octoper octoper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@chanioxaris
Copy link
Member Author

chanioxaris commented Sep 3, 2024

!snapshot

@chanioxaris chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from c106fbc to fb4e005 Compare September 3, 2024 12:44
@chanioxaris chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from fb4e005 to e74b609 Compare September 3, 2024 13:02
panteliselef
panteliselef approved these changes Sep 3, 2024
View reviewed changes
Copy link
Member

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only minor feedback and I added some info about the other reviews

packages/clerk-js/src/core/clerk.ts
Comment on lines +1424 to +1429
const generateSignature =
provider === 'metamask'
? generateSignatureWithMetamask
: provider === 'coinbase'
? generateSignatureWithCoinbase
: generateSignatureWithCoinbaseWallet;
Copy link
Member

@panteliselef panteliselef Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In a follow up PR this will become simpler as we are dropping the generateSignatureWithCoinbase ?

Copy link
Member Author

@chanioxaris chanioxaris Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's correct, on the next PR we are dropping the Coinbase provider in favor of the new Coinbase Wallet

packages/clerk-js/src/ui/common/constants.ts
id: 'coinbase',
name: 'Coinbase Wallet',
},
coinbase_wallet: {
Copy link
Member

@panteliselef panteliselef Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 SW = smart wallet

Suggested change
coinbase_wallet: {
coinbase_sw: {

Copy link
Member Author

@chanioxaris chanioxaris Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coinbase prefer to use the term Coinbase Wallet rather than Coinbase Smart Wallet

packages/clerk-js/webpack.config.js
cacheGroups: {
zxcvbnTSCoreVendor: {
test: /[\\/]node_modules[\\/](@zxcvbn-ts)[\\/](core)[\\/]/,
test: /[\\/]node_modules[\\/](@zxcvbn-ts\/core|fastest-levenshtein)[\\/]/,
Copy link
Member

@panteliselef panteliselef Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is unrelated, but it is minor so it's ok

packages/clerk-js/webpack.config.js
chunks: 'all',
},
coinbaseWalletSDKVendor: {
test: /[\\/]node_modules[\\/](@coinbase\/wallet-sdk|ieee754|preact|keccak|buffer|string_decoder|sha\.js|base64-js|safe-buffer|util-deprecate|inherits)[\\/]/,
Copy link
Member

@panteliselef panteliselef Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are manually grouping together all deps that are only used from the coinbase wallet sdk in order to avoid puting them in the vendors chunk

packages/types/src/clerk.ts Outdated
authenticateWithCoinbase: (params?: AuthenticateWithCoinbaseParams) => Promise<unknown>;

/**
* Authenticates user using their Coinbase Wallet Smart Wallet and browser extension
Copy link
Member

@panteliselef panteliselef Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be

Suggested change
* Authenticates user using their Coinbase Wallet Smart Wallet and browser extension
* Authenticates user using their Coinbase Smart Wallet and Wallet browser extension

Copy link
Member Author

@chanioxaris chanioxaris Sep 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops nice catch!

@chanioxaris chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from e74b609 to c0da1a2 Compare September 3, 2024 13:21
@chanioxaris
feat(clerk-js,types,react,elements): Support Coinbase Wallet web3 pro…
44de48c 
…vider and authentication strategy

Coinbase Wallet is a new generic web3 provider and strategy that supports both Smart Wallets
and Coinbase Wallet browser extension. Users can use it to authenticate themselves using their
own web3 address as an identifier
@chanioxaris chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from c0da1a2 to 44de48c Compare September 3, 2024 13:53
@nikosdouvlis nikosdouvlis merged commit 8a3b9f0 into main Sep 3, 2024
@nikosdouvlis nikosdouvlis deleted the haris/user-647-add-support-for-coinbase-smart-wallet branch September 3, 2024 13:56
@clerk-cookie clerk-cookie mentioned this pull request Sep 3, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nikosdouvlis nikosdouvlis nikosdouvlis approved these changes

@octoper octoper octoper approved these changes

@panteliselef panteliselef panteliselef approved these changes

@EmmanouelaPothitou EmmanouelaPothitou Awaiting requested review from EmmanouelaPothitou

Assignees

@chanioxaris chanioxaris

Labels

clerk-js elements react types

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@chanioxaris @nikosdouvlis @octoper @panteliselef @clerk-cookie