use-cardano-web3-auth
v1.1.0
Published
A React hook for Cardano Web3 authentication.
Downloads
6
Maintainers
Readme
use-cardano-web3auth
use-cardano-web3auth
is a React hook library designed to facilitate authentication with web3auth.io in Cardano projects.
Installation
npm install use-cardano-web3auth
Usage
- Login to Web3Auth.
- Visit web3auth.io and create a new project.
- Create verifiers for social login (e.g., Google, Twitter, GitHub).
- Set OAuth Verifiers in your project:
const oAuthClients: { [key: string]: { name: string, clientId: string, verifier: string } } = {
google: {
name: "google",
clientId: "MY_GOOGLE_CLIENT_ID",
verifier: "my-google-verifier"
},
twitter: {
name: "jwt",
clientId: "MY_TWITTER_CLIENT_ID",
verifier: "my-twitter-verifier"
},
github: {
name: "jwt",
clientId: "MY_GITHUB_CLIENT_ID",
verifier: "my-github-verifier"
}
}
- Wrap Components with Web3AuthProvider:
import { Web3AuthProvider } from 'use-cardano-web3-auth';
<Web3AuthProvider
web3AuthClientId='YOUR_WEB3AUTH_CLIENT_ID'
redirectUri={typeof window !== 'undefined' ? `${window.location.origin}` : 'http://localhost:5173'}
redirectPathName={"web3auth/login"}
oAuthClients={oAuthClients}
blockfrostKey={process.env.BLOCKFROST_PROJECT_ID as string}
blockfrostUrl={process.env.BLOCKFROST_URL as string}
network={process.env.NETWORK as "Mainnet" | "Preprod"}
>
<YourComponent />
</Web3AuthProvider>
Example usage:
Creating a Cardano Wallet with social login:
import { useWeb3Auth } from 'use-cardano-web3-auth';
const YourComponent = () => {
const { web3Auth } = useWeb3Auth();
const handleLogin = async () => {
await web3Auth?.login("google");
}
return (
<button onClick={handleLogin}>Login with Google</button>
);
}
Using the CIP-30 Wallet API:
import { useWeb3Auth } from 'use-cardano-web3-auth';
const YourComponent = () => {
const { web3Auth } = useWeb3Auth();
const handleSignMessage = async () => {
const message = "Hello World!";
let hexMessage = '';
for (var i = 0, l = message.length; i < l; i++) {
hexMessage += message.charCodeAt(i).toString(16);
}
const signature = await web3AuthAPI!.signData((await web3Auth?.cardanoWalletAPI?.getRewardAddresses())![0], hexMessage);
console.log({ signature });
}
return (
<button onClick={handleSignMessage}>Sign Message</button>
);
}
License
This project is licensed under the MIT License - see the LICENSE file for details.