Skip to content

[Docs] Redesign sidebar and update wallet documentation #7602

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.

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
410 changes: 95 additions & 315 deletions apps/portal/src/app/connect/account-abstraction/get-started/page.mdx

Large diffs are not rendered by default.

Binary file removed apps/portal/src/app/connect/assets/test.jpg
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,30 @@ import EWCustomAuthdb2 from "../images/customauthdb2.png";

export const metadata = createMetadata({
image: {
title: "Configure Authentication for In-App Wallet",
title: "Bring your own auth",
icon: "wallets",
},
title: "Configure Authentication In-App Wallet | thirdweb",
title: "Bring your own auth | thirdweb",
description:
"Configure Authentication with OIDC standard, OR a generic option that lets you bring your own auth server",
"Configure in-app wallets with OIDC standard, or a generic endpoint that lets you bring your own auth server",
});

# Configuration
# Bring your own auth

We offer two options to setup in-app wallets with custom auth, one that is based on the [OIDC (Open ID Connect)](https://openid.net/developers/how-connect-works/) standard, and a generic option that lets you bring your own auth server. You can also use both options together if needed.
You can attach wallets to your existing users using the `jwt` and `auth_endpoint` strategies.

## OIDC compatible auth
- The `jwt` strategy is based on the [OIDC (Open ID Connect)](https://openid.net/developers/how-connect-works/) standard
- The `auth_endpoint` strategy is a generic option that lets you bring your own auth server.

<Tabs defaultValue="jwt">
<TabsList>
<TabsTrigger value="jwt">JWT (OICD)</TabsTrigger>
<TabsTrigger value="auth_endpoint">Auth endpoint</TabsTrigger>
</TabsList>

<TabsContent value="jwt">

## Strategy `jwt` - OIDC compatible auth

The OIDC auth set-up is a good option if you use an external auth provider like `Auth0`, `firebase`, `cognito` etc. that publishes the JWK for checking the authenticity of the token.

Expand All @@ -44,12 +55,13 @@ You will be asked to enter the following values
- The URL of the JWKS file (public key): This is used to verify the token was signed by you.
- The `aud` value of the idToken: This is used to verify that thirdweb is the intended user of the token

### Authenticating a user via OIDC-compatible auth
### Usage example

<Tabs defaultValue="react">
<Tabs defaultValue="typescript">
<TabsList>
<TabsTrigger value="react">React</TabsTrigger>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
<TabsTrigger value="react">React</TabsTrigger>
<TabsTrigger value="dotnet">.NET</TabsTrigger>
</TabsList>

<TabsContent value="react">
Expand All @@ -58,19 +70,29 @@ You will be asked to enter the following values
import { inAppWallet } from "thirdweb/wallets";
import { useConnect } from "thirdweb/react";

const { connect } = useConnect();
const client = createThirdwebClient({ clientId: "your-client-id" });
const wallet = inAppWallet();

const MyComponent = () => {
const { connect } = useConnect();

const handlePostLogin = async (jwt: string) => {
const handlePostLogin = async () => {
await connect(() => {
const wallet = inAppWallet();
wallet.connect({
client,
strategy: "jwt",
jwt,
jwt: "<your-jwt-token>",
});
return wallet;
});
};

return (
<button onClick={() => handlePostLogin()}>
Login
</button>
);
};
```

</TabsContent>
Expand All @@ -85,16 +107,33 @@ const wallet = inAppWallet();
const account = await wallet.connect({
client,
strategy: "jwt",
jwt,
jwt: "<your-jwt-token>",
});

// use the account to send transactions
```

</TabsContent>

<TabsContent value="dotnet">

```csharp
using Thirdweb;

var client = ThirdwebClient.Create(clientId: "your-client-id");
var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.JWT);
var address = await wallet.LoginWithCustomAuth(jwt: "<your-jwt-token>");
```

</TabsContent>

</Tabs>

## Generic auth
</TabsContent>

<TabsContent value="auth_endpoint">

## Strategy `auth_endpoint` - Generic auth

Generic auth is a lower-level option that can be used when you have your own auth server that you use to authenticate users.

Expand Down Expand Up @@ -127,35 +166,47 @@ The endpoint should return a JSON body containing the following fields:

You can also pass a list of headers. These headers will be sent with every request to your verification endpoint. You can use these to authenticate the request.

### Authenticating a user via generic auth
### Usage example

Once you've logged in with your own auth, you can pass the user's JWT to the in-app wallet to authenticate and connect.

<Tabs defaultValue="react">
<Tabs defaultValue="typescript">
<TabsList>
<TabsTrigger value="react">React</TabsTrigger>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
<TabsTrigger value="react">React</TabsTrigger>
<TabsTrigger value="dotnet">.NET</TabsTrigger>
</TabsList>

<TabsContent value="react">

```typescript
import { createThirdwebClient } from "thirdweb";
import { inAppWallet } from "thirdweb/wallets";
import { useConnect } from "thirdweb/react";

const { connect } = useConnect();
const client = createThirdwebClient({ clientId: "your-client-id" });
const wallet = inAppWallet();

const handlePostLogin = async (jwt: string) => {
await connect(async () => {
const wallet = inAppWallet();
await wallet.connect({
client,
strategy: "auth_endpoint",
// This is the payload that is sent to the auth endpoint
payload,
const MyComponent = () => {
const { connect } = useConnect();

const handlePostLogin = async () => {
await connect(async () => {
await wallet.connect({
client,
strategy: "auth_endpoint",
// This is the payload that will be sent to your auth endpoint
payload: "<your-auth-payload>",
});
return wallet;
});
return wallet;
});
};

return (
<button onClick={() => handlePostLogin()}>
Login
</button>
);
};
```

Expand All @@ -173,12 +224,29 @@ const wallet = inAppWallet();
const account = await wallet.connect({
client,
strategy: "auth_endpoint",
// This is the payload that is sent to the auth endpoint
payload,
// This is the payload that will be sent to your auth endpoint
payload: "<your-auth-payload>",
});

// use the account to send transactions
```

</TabsContent>

<TabsContent value="dotnet">

```csharp
using Thirdweb;

var client = ThirdwebClient.Create(clientId: "your-client-id");
var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.AuthEndpoint);
var address = await wallet.LoginWithAuthEndpoint(payload: "<your-auth-payload>");
```

</TabsContent>

</Tabs>

</TabsContent>

</Tabs>
Loading
Loading