Common issues and solutions when using the Embedded Wallet Kit.
@turnkey/react-wallet-kit
. If you run into any problems, check this section first for potential fixes.
onError
onError
callback function to the TurnkeyProvider
. Any errors that occur during the execution of functions or initialization will be passed into this callback. This will help you debug issues more effectively.
@turnkey/react-wallet-kit
. Here are some of them along with potential solutions:
authProxyConfigId
or organizationId
in the TurnkeyProvider
config.apiBaseUrl
or authProxyUrl
.onError
callback in the TurnkeyProvider
as shown above.
authProxyConfigId
and organizationId
in your TurnkeyProvider
config. You can find these values in the Turnkey Dashboard.
.env
file or environment configuration. You can also log these values to the console to verify they are being set correctly.
authProxyConfigId
from the TurnkeyProvider
config. This will disable the Turnkey auth proxy and allow you to use your own authentication flow. Note that the Log in or sign up modal will not be available in this case, and you will need to implement your own authentication flow.
authProxyConfigId
is required to use the Turnkey authentication flow.
authProxyConfigId
that you can use in your TurnkeyProvider
config. Pass this authProxyConfigId
to the TurnkeyProvider
config to enable the authentication flow.
authProxyConfigId
from the TurnkeyProvider
config. This will disable the Turnkey Auth Proxy and allow you to use your own authentication flow. Note that the Log in or sign up modal will not be available in this case, and you will need to implement your own authentication flow.
app/layout.tsx
in Next.js). You can do this by adding the following line at the top of your file:
supressMissingStylesError: true
to the ui
object in the TurnkeyProvider
config. This will disable the styles check.
TurnkeyProvider
but you’re using the TurnkeyProvider
in a server component. In Next.js, components default to server components, which means they cannot have event handlers or state.
TurnkeyProvider
is used in a client component. You can do this by adding "use client";
at the top of your file. This will make the component a client component and allow you to pass in event handlers.
handleSignMessage
, without having an active session. This can happen if the user is not logged in or if the session has expired.
authState
variable from the useTurnkey
hook to determine if the user is authenticated.
autoRefreshSession
option in the TurnkeyProvider
config. This will ensure that the session is refreshed before it expires, keeping the user authenticated.
onSessionExpired
callback in the TurnkeyProvider
. This will allow you to handle session expiration gracefully, such as prompting the user to log in again.
@layer utilities
is used but no matching @tailwind utilities
directive is present (Tailwind V3 Error)@turnkey/react-wallet-kit
is built with Tailwind CSS v4 under the hood, and exports the styles into a regular CSS file for importing into any project. However, if you are using Tailwind CSS v3, you may encounter this error because Tailwind CSS v3 uses different syntax for CSS directives. Note that this error does not occur in Tailwind CSS v4 projects or when Tailwind CSS is not installed at all.
Install postcss-import
postcss-import
if you haven’t already:Add postcss-import to your PostCSS config
postcss.config.mjs
(or equivalent) file:Import Turnkey styles in your main CSS file
styles/globals.css
):We usually recommend importing the styles in your main application file (e.g., app/layout.tsx
in Next.js) however, if you’re using Tailwind CSS v3, you can’t do this. Please remove the import if you already have it in your main application file.For Tailwind CSS v3, you need to import the Turnkey styles in your main CSS file (e.g., styles/globals.css
) by pointing the import to @turnkey/react-wallet-kit/dist/styles.css
file:dist
directory to properly retrieve the styles (@turnkey/react-wallet-kit/dist/styles.css
instead of @turnkey/react-wallet-kit/styles.css
).@turnkey/react-wallet-kit
. Radix UI uses portals to render components outside of the main DOM hierarchy, which can cause conflicts when trying to open a Turnkey modal while a Radix UI component is also open. You may notice that the Turnkey modal becomes unresponsive or that the Radix UI component remains open and blocks interaction with the Turnkey modal.
headless-ui
components since Turnkey’s modals are built with headless-ui
under the hood.
If you cannot avoid using Radix UI components, you can try the following workaround:
Update your global CSS file
styles/globals.css
):pointer-events: auto;
to the Turnkey modal portal, allowing it to receive pointer events even when other portals are open.Modify your Radix UI components
onPointerDownOutside
handler to your Radix UI components: