I could not get the admin portal sdk component AdminPortalMemberManagement
to work. I keep getting this error An error occurred: <AdminPortalMemberManagement /> can only be used inside <StytchProvider>.
StychProvider was properly initialized and was wrapping the AdminPortalMemberManagement component but it still output this error when I ran the code.
Hey Tolu – thanks for posting!
Would you mind sharing code snippets of how you’re initializing the StytchB2BProvider
and the AdminPortalMemberManagement
component, including any relevant import statements? We’d be happy to take a look!
This is my admin portal component
import { AdminPortalMemberManagement } from '@stytch/react/b2b/adminPortal';
const AdminPortal = () => {
return (
<AdminPortalMemberManagement />
);
};
export default AdminPortal;
This is how i am initialising it in main.tsx
import { StytchUIClient } from "@stytch/vanilla-js";
import { StytchProvider } from '@stytch/react';
const publicToken = import.meta.env.VITE_PUBLIC_TOKEN;
const stytchClient = new StytchUIClient(publicToken);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<>
<GlobalStyles />
<QueryClientProvider client={queryClient}>
<SessionProvider>
<Toaster position="top-center" reverseOrder={false} />
<CopilotKit url={`${import.meta.env.VITE_COPILOT_API_URL}/api/copilot`}>
<StytchProvider stytch={stytchClient}>
<RouterProvider router={router} />
</StytchProvider>
</CopilotKit>
</SessionProvider>
</QueryClientProvider>
</>
);
My Router
const router = createBrowserRouter(
createRoutesFromElements(<Route path="/admin-portal" element={<AdminPortal />} />)
Got it, thanks Tolu!
You’ll actually need to use the StytchB2BProvider
and StytchB2BUIClient
(rather than StytchProvider
and StytchUIClient
). Sorry about that – the error message we’re currently returning is misleading. I’ll flag that for our team!
Here’s an updated snippet:
import { StytchB2BProvider } from "@stytch/react/b2b";
import { StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
const publicToken = import.meta.env.VITE_PUBLIC_TOKEN;
const stytchClient = new StytchB2BUIClient(publicToken);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<>
<GlobalStyles />
<QueryClientProvider client={queryClient}>
<SessionProvider>
<Toaster position="top-center" reverseOrder={false} />
<CopilotKit url={`${import.meta.env.VITE_COPILOT_API_URL}/api/copilot`}>
<StytchB2BProvider stytch={stytchClient}>
<RouterProvider router={router} />
</StytchB2BProvider>
</CopilotKit>
</SessionProvider>
</QueryClientProvider>
</>
);
Let me know if you still run into trouble after applying those changes!
This works quite fine. Thank You.
Meanwhile I am facing a new issue. All i can see on the admin portal is Please log in to manage Members.
Having logged in a user I have configured using SSO. Do I require any authentication settings to enable this page to work? Thanks.
Can you confirm that the member you logged in with has the “stytch_admin” role assigned to them?
If you provide your member_id, I can take a look on my side, as well.
This is the member_id: member-test-ebda1462-adc6-44f0-abc3-3f0385efae99
The user has both stytch_member
and stytch_admin
assigned.
Thanks, Tolu! This is a tricky one!
Can you confirm the SSO sign in happened on the same domain as the Admin Portal is hosted on?
Additionally, can you check the developer tools of your browser to see if the “stytch_b2b_session” cookie is present?
SO the APP is a fullstack app (react,rails) hosted separately and here is the flow of my SSO signin.
- I made use of this link on the FE
https://test.stytch.com/v1/public/sso/start?connection_id=#{organization.stytch_connection_id}&public_token=#{ENV["STYTCH_PUBLIC_TOKEN"]}
- It returns back with a token after signing in my IDP(Okta)
- Authenticates using this
client.sso.authenticate(sso_token: params[:token])
on the BE. - use the success response to set my application session and then redirects to the admin portal.
Also there is no stytch_b2b_session
session in my cookies.
Ah, I think that is the root of the issue.
The Admin Panel will need a session cookie on the frontend to validate authN and authZ.
If you are performing the SSO Auth on the backend, you will need to hydrate the Stytch Session cookies on the frontend.
Please see the guide for this here
Note: The correct cookie name is stytch_session. Please ignore my last comment which included “b2b”. My apologies for the confusion here.
This solves it. Thanks.