> ## Documentation Index
> Fetch the complete documentation index at: https://crossmint-wallets-docs-2-5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Bring Your Own Auth

> Bring your own auth to your wallet

Crossmint wallets can be used with all major authentication providers
(such as Cognito, Auth0, Firebase, Stytch, etc.) as well as other wallet providers
(like Privy and Dynamic).

For Privy and Dynamic, you can use their embedded wallets as signers for Crossmint wallets.

## Prerequisites

* **API Key**: Ensure you have an API key with the scopes: `wallets.create`.

## Using your own auth provider

<Tabs>
  <Tab title="React">
    <Steps>
      <Step title="Configure JWT Authentication in the Crossmint Console">
        1. Navigate to your project in the Crossmint Console.
        2. Go to the API Keys section from the sidebar.
        3. Scroll down to the JWT authentication section.
        4. Choose your preferred authentication method:

        * **3P Auth providers**: Select from supported providers such as Dynamic, Auth0, Stytch, Privy, or Firebase. Enter any required environment IDs or configuration details.
        * **Custom tokens**: Opt to issue and manage your own JWTs.

        5. After making your selection and providing any necessary details, click **Save JWT auth settings** to apply your configuration.

        <img src="https://mintcdn.com/crossmint-wallets-docs-2-5/7ig1y7mqlvZy0ezV/images/wallets/jwt-authentication.png?fit=max&auto=format&n=7ig1y7mqlvZy0ezV&q=85&s=dcbae553c3aaaf2aa5b683e317ba3f9a" alt="JWT Authentication Settings" width="1788" height="1254" data-path="images/wallets/jwt-authentication.png" />
      </Step>

      <Step title="Add the Crossmint providers to your app">
        Add the necessary Crossmint providers to your app together with your own auth provider.
        With the current setup, a wallet will be created automatically on login.

        <CodeGroup>
          ```tsx next.js theme={null}
          "use client";

          import {
              CrossmintProvider,
              CrossmintWalletProvider,
          } from "@crossmint/client-sdk-react-ui";

          import { YourAuthProvider } from "@your-auth-provider";

          export function CrossmintProviders({ children }: { children: React.ReactNode }) {
              return (
                  <YourAuthProvider>
                      <CrossmintProvider apiKey="<crossmint-client-api-key>">
                          <CrossmintWalletProvider>
                              createOnLogin={{
                                  chain: "<your-chain>",
                              }}
                          >
                          {children}
                          </CrossmintWalletProvider>
                      </CrossmintProvider>
                  </YourAuthProvider>
              );
          }
          ```

          ```tsx create-react-app theme={null}
          import ReactDOM from 'react-dom/client';

          import './index.css';

          import App from './App';

          import {
              CrossmintProvider,
              CrossmintWalletProvider,
          } from "@crossmint/client-sdk-react-ui";

          import { AuthProvider } from "@your-auth-provider";

          const root = ReactDOM.createRoot(document.getElementById('root'));

          root.render(
              <React.StrictMode>
                  <AuthProvider>
                      <CrossmintProvider apiKey="crossmint-api-key">
                          <CrossmintWalletProvider>
                              createOnLogin={{
                                  chain: "solana",
                              }}
                          >
                              <App />
                          </CrossmintWalletProvider>
                      </CrossmintProvider>
                  </AuthProvider>
              </React.StrictMode>
          );
          ```
        </CodeGroup>
      </Step>

      <Step title="Passthrough the jwt information to the Crossmint provider">
        Set the user in the auth provider.

        <CodeGroup>
          ```tsx next.js theme={null}
          import { useYourAuthProviderHook } from "@your-auth-provider";
          import { useEffect } from "react";
          import { useCrossmint } from "@crossmint/client-sdk-react-ui";

          const { jwt, email } = useYourAuthProviderHook();
          const { experimental_setCustomAuth } = useCrossmint();

          useEffect(() => {
              if (jwt && email) {
                  experimental_setCustomAuth({
                      jwt,
                      email,
                  });
              }
          }, [jwt, email]);
          ```

          ```tsx create-react-app theme={null}
          import { useYourAuthProviderHook } from "@your-auth-provider";
          import { useEffect } from "react";
          import { useCrossmint } from "@crossmint/client-sdk-react-ui";

          const { jwt, email } = useYourAuthProviderHook();
          const { experimental_setCustomAuth } = useCrossmint();

          useEffect(() => {
              if (jwt && email) {
                  experimental_setCustomAuth({
                      jwt,
                      email,
                  });
              }
          }, [jwt, email]);
          ```
        </CodeGroup>
      </Step>
    </Steps>
  </Tab>

  <Tab title="React Native">
    <Steps>
      <Step title="Configure JWT Authentication in the Crossmint Console">
        1. Navigate to your project in the Crossmint Console.
        2. Go to the API Keys section from the sidebar.
        3. Scroll down to the JWT authentication section.
        4. Choose your preferred authentication method:

        * **3P Auth providers**: Select from supported providers such as Dynamic, Auth0, Stytch, Privy, or Firebase. Enter any required environment IDs or configuration details.
        * **Custom tokens**: Opt to issue and manage your own JWTs.

        5. After making your selection and providing any necessary details, click **Save JWT auth settings** to apply your configuration.

        <img src="https://mintcdn.com/crossmint-wallets-docs-2-5/7ig1y7mqlvZy0ezV/images/wallets/jwt-authentication.png?fit=max&auto=format&n=7ig1y7mqlvZy0ezV&q=85&s=dcbae553c3aaaf2aa5b683e317ba3f9a" alt="JWT Authentication Settings" width="1788" height="1254" data-path="images/wallets/jwt-authentication.png" />
      </Step>

      <Step title="Add the Crossmint providers to your app">
        Add the necessary Crossmint providers to your app together with your own auth provider.
        With the current setup, a wallet will be created automatically on login.

        ```tsx theme={null}
        import {
            CrossmintProvider,
            CrossmintWalletProvider,
        } from "@crossmint/client-sdk-react-native-ui";

        import { YourAuthProvider } from "@your-auth-provider";

        type ProvidersProps = {
            children: React.ReactNode;
        };

        export default function CrossmintProviders({ children }: ProvidersProps) {
            const apiKey = process.env.EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY;

            if (apiKey == null) {
                throw new Error("EXPO_PUBLIC_CLIENT_CROSSMINT_API_KEY is not set");
            }

            return (
                <CrossmintProvider apiKey={apiKey}>
                    <YourAuthProvider>
                        <CrossmintWalletProvider createOnLogin={{
                            chain: "<your-chain>",
                        }}>{children}</CrossmintWalletProvider>
                    </YourAuthProvider>
                </CrossmintProvider>
            );
        }
        ```
      </Step>

      <Step title="Passthrough the jwt information to the Crossmint provider">
        Set the user in the auth provider.

        ```tsx theme={null}
        import { useYourAuthProviderHook } from "@your-auth-provider";
        import { useCrossmint } from "@crossmint/client-sdk-react-native-ui";

        const { jwt, email } = useYourAuthProviderHook();
        const { experimental_setCustomAuth } = useCrossmint();

        useEffect(() => {
            if (jwt && email) {
                experimental_setCustomAuth({
                    jwt,
                    email,
                });
            }
        }, [jwt, email]);
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>