Skip to content

Commit

Permalink
feat: add verifications to profile (#122)
Browse files Browse the repository at this point in the history
  • Loading branch information
@horsefacts
horsefacts committed Jan 26, 2024
1 parent 8913f4e commit 40d923f
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 47 deletions.
8 changes: 6 additions & 2 deletions packages/auth-client/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,12 +161,14 @@ const status = await appClient.status({
state: 'pending' | 'completed'
nonce: string
message?: string
signature?: `0x${string}`
signature?: Hex
fid?: number
username?: string
bio?: string
displayName?: string
pfpUrl?: string
custody?: Hex
verifications?: Hex[]
}
isError: boolean
error: Error
Expand Down Expand Up @@ -210,12 +212,14 @@ const status = await appClient.watchStatus({
state: 'completed'
nonce: string
message?: string
signature?: `0x${string}`
signature?: Hex
fid?: number
username?: string
bio?: string
displayName?: string
pfpUrl?: string
custody?: Hex
verifications?: Hex[]
}
isError: boolean
error: Error
Expand Down
80 changes: 44 additions & 36 deletions packages/auth-kit/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,10 @@ You can find official examples [here](https://github.com/farcasterxyz/connect-mo
Projects using [Create React App (CRA)](https://create-react-app.dev/) may run into TypeScript version conflicts, as `react-scripts@5.0.1` expects a peer dependency of TypeScript version `^3.2.1 || ^4`, while both viem and AuthKit require `>=5.0.4`.

To resolve this issue:

- Install the latest version of TypeScript: `npm i typescript -D`
- Add an override for `react-scripts` to your package.json file, to remove the version ceiling:

```json
"overrides": {
"react-scripts": {
Expand Down Expand Up @@ -213,45 +215,49 @@ function App() {
bio: string;
displayName: string;
pfpUrl: string;
custody: Hex;
verifications: Hex[];
},
validSignature: boolean;
};
```

| Parameter | Description |
| ------------------ | ------------------------------------------------------------------------------------------------ |
| `signIn` | Call this function to connect to the relay and poll for a signature. |
| `reconnect` | Reconnect to the relay and try again. Use in the event of an error. |
| `isSuccess` | True when the relay server returns a valid signature. |
| `isPolling` | True when the relay state is `"pending"` and the app is polling the relay server for a response. |
| `isError` | True when an error has occurred. |
| `error` | `AuthClientError` instance. |
| `channelToken` | Farcaster Auth relay channel token. |
| `url` | Sign in With Farcaster URL to present to the user. Links to Warpcast in v1. |
| `qrcodeUri` | QR code image data URI encoding `url`. |
| `data.state` | Status of the sign in request, either `"pending"` or `"complete"` |
| `data.nonce` | Random nonce used in the SIWE message. If you do not provide a custom nonce, read this value. |
| `data.message` | The generated SIWE message. |
| `data.signature` | Hex signature produced by the user's Warpcast wallet. |
| `data.fid` | User's Farcaster ID. |
| `data.username` | User's Farcaster username. |
| `data.bio` | User's Farcaster bio. |
| `data.displayName` | User's Farcaster display name. |
| `data.pfpUrl` | User's Farcaster profile picture URL. |
| `validSignature` | True when the signature returned by the relay server is valid. |

### `useUserData`
| Parameter | Description |
| -------------------- | ------------------------------------------------------------------------------------------------ |
| `signIn` | Call this function to connect to the relay and poll for a signature. |
| `reconnect` | Reconnect to the relay and try again. Use in the event of an error. |
| `isSuccess` | True when the relay server returns a valid signature. |
| `isPolling` | True when the relay state is `"pending"` and the app is polling the relay server for a response. |
| `isError` | True when an error has occurred. |
| `error` | `AuthClientError` instance. |
| `channelToken` | Farcaster Auth relay channel token. |
| `url` | Sign in With Farcaster URL to present to the user. Links to Warpcast in v1. |
| `qrcodeUri` | QR code image data URI encoding `url`. |
| `data.state` | Status of the sign in request, either `"pending"` or `"complete"` |
| `data.nonce` | Random nonce used in the SIWE message. If you do not provide a custom nonce, read this value. |
| `data.message` | The generated SIWE message. |
| `data.signature` | Hex signature produced by the user's Warpcast wallet. |
| `data.fid` | User's Farcaster ID. |
| `data.username` | User's Farcaster username. |
| `data.bio` | User's Farcaster bio. |
| `data.displayName` | User's Farcaster display name. |
| `data.pfpUrl` | User's Farcaster profile picture URL. |
| `data.custody` | User's Farcaster ID custody address. |
| `data.verifications` | User's verified addresses. |
| `validSignature` | True when the signature returned by the relay server is valid. |

### `useProfile`

Hook for reading information about the authenticated user.

```tsx
import { useUserData } from "@farcaster/auth-kit";
import { useProfile } from "@farcaster/auth-kit";

function App() {
const {
isAuthenticated,
userData: { fid, pfpUrl, username, displayName, bio },
} = useUserData();
profile: { fid, pfpUrl, username, displayName, bio },
} = useProfile();

return (
<div>
Expand All @@ -266,7 +272,7 @@ function App() {
```ts
{
isAuthenticated: boolean;
userData: {
profile: {
fid: number;
username: string;
bio: string;
Expand All @@ -276,21 +282,23 @@ function App() {
};
```

| Parameter | Description |
| ---------------------- | ------------------------------------- |
| `isAuthenticated` | True if the user is authenticated. |
| `userData.fid` | User's Farcaster ID. |
| `userData.username` | User's Farcaster username. |
| `userData.bio` | User's Farcaster bio. |
| `userData.displayName` | User's Farcaster display name. |
| `userData.pfpUrl` | User's Farcaster profile picture URL. |
| Parameter | Description |
| ----------------------- | ------------------------------------- |
| `isAuthenticated` | True if the user is authenticated. |
| `profile.fid` | User's Farcaster ID. |
| `profile.username` | User's Farcaster username. |
| `profile.bio` | User's Farcaster bio. |
| `profile.displayName` | User's Farcaster display name. |
| `profile.pfpUrl` | User's Farcaster profile picture URL. |
| `profile.custody` | User's Farcaster ID custody address. |
| `profile.verifications` | User's verified addresses. |

### `useSignInMessage`

Hook for reading the SIWE message and signature used to authenticate the user.

```tsx
import { useUserData } from "@farcaster/auth-kit";
import { useSignInMessage } from "@farcaster/auth-kit";

function App() {
const { message, signature } = useSignInMessage();
Expand Down
6 changes: 4 additions & 2 deletions packages/auth-kit/src/components/AuthKitProvider/AuthKitProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export interface Profile {
username?: string;
displayName?: string;
bio?: string;
custody?: `0x${string}`;
verifications?: `0x${string}`[];
}

export interface SignInMessage {
Expand Down Expand Up @@ -78,9 +80,9 @@ export function AuthKitProvider({
}, [relay, rpcUrl, version]);

const onSignIn = useCallback((signInData: UseSignInData) => {
const { message, signature, fid, username, bio, displayName, pfpUrl } = signInData;
const { message, signature, fid, username, bio, displayName, pfpUrl, custody, verifications } = signInData;
setIsAuthenticated(true);
setProfile({ fid, username, bio, displayName, pfpUrl });
setProfile({ fid, username, bio, displayName, pfpUrl, custody, verifications });
setSignInMessage({ message, signature });
}, []);

Expand Down
9 changes: 7 additions & 2 deletions packages/auth-kit/src/components/Demo/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { AuthKitProvider } from "../AuthKitProvider";

export function Demo() {
const config = {
rpcUrl: "https://mainnet.optimism.io"
rpcUrl: "https://mainnet.optimism.io",
};

return (
Expand All @@ -28,7 +28,7 @@ export function Demo() {
function UserProfile() {
const {
isAuthenticated,
profile: { fid, bio, displayName },
profile: { fid, bio, displayName, custody },
} = useProfile();

return (
Expand All @@ -50,6 +50,11 @@ function UserProfile() {
<strong>Bio:</strong> {bio}
</p>
)}
{custody && (
<p>
<strong>Custody address:</strong> {custody}
</p>
)}
</div>
)}
</div>
Expand Down
1 change: 0 additions & 1 deletion packages/auth-kit/src/components/SignOutButton/SignOutButton.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { style } from "@vanilla-extract/css";
export const signOutButtonContainer = style({
marginTop: "12px",
fontWeight: "400",
boxShadow: "0px 6px 12px 0 rgba(0,0,0,0.12)",
});

export const signOutIcon = style({
Expand Down
13 changes: 9 additions & 4 deletions packages/auth-kit/src/components/SignOutButton/SignOutButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { secondaryButton } from "../styles.css.ts";
import {
signOutButtonContainer, signOutIcon,
} from "./SignOutButton.css.ts";
import { signOutButtonContainer, signOutIcon } from "./SignOutButton.css.ts";

export function SignOutButton({ signOut }: { signOut?: () => void }) {
return (
<div className={signOutButtonContainer}>
<button type="button" className={secondaryButton} onClick={signOut}>
<button
type="button"
className={secondaryButton}
style={{
boxShadow: "0px 6px 12px 0 rgba(0,0,0,0.12)",
}}
onClick={signOut}
>
<svg
width="19"
height="20"
Expand Down

0 comments on commit 40d923f

Please sign in to comment.