Authentication

How Myco auth works and how to use it in your app.

Overview

Myco provides federated authentication — users sign in through Myco’s auth portal, and your app receives a verified session. The SDK handles the entire flow.

Setup

Authentication is configured when you initialize the SDK. In a Vibekit app, this is already done in src/lib/myco.ts:


import { MycoSDK } from "@myco-dev/sdk";
import type { EntityTypes } from "@/types/myco.generated";
 
export const myco = new MycoSDK<EntityTypes>("your-app-key", {
  redirectOnUnauth: false,
});

The MycoProvider component wraps your app and manages auth state:


import { MycoProvider } from "@myco-dev/sdk";
import { myco } from "./lib/myco";
 
function App() {
  return (
    <MycoProvider myco={myco}>
      <YourRoutes />
    </MycoProvider>
  );
}

MycoProvider also sets up React Query’s QueryClientProvider — you don’t need to add your own.

`useAuth` hook

Access auth state and methods from any component:


import { useAuth } from "@myco-dev/sdk/auth";
 
function Header() {
  const { isLoading, isLoggedIn, user, login, logout } = useAuth();
 
  if (isLoading) return <div>Loading...</div>;
  if (!isLoggedIn) return <button onClick={() => login()}>Sign In</button>;
 
  return (
    <div>
      Hello, {user?.name}
      <button onClick={() => logout()}>Sign Out</button>
    </div>
  );
}

Return values

Property	Type	Description
`isLoading`	`boolean`	`true` while session is being verified
`isLoggedIn`	`boolean`	`true` if user has a valid session
`user`	`MycoUser \| undefined`	Current user object
`userId`	`string \| undefined`	Shortcut to `user.id`
`login`	`(returnTo?: string) => void`	Redirect to Myco login
`logout`	`() => void`	Clear session and redirect
`refresh`	`() => Promise<void>`	Re-fetch session data

`MycoUser` type


interface MycoUser {
  id: string;
  name: string;
  email: string;
  emailVerified: boolean;
  image?: string | null;
  createdAt: Date;
  updatedAt: Date;
}

Protected routes

Wrap any route in ProtectedRoute to require authentication:


import { ProtectedRoute } from "@myco-dev/sdk/auth";
 
<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <DashboardPage />
    </ProtectedRoute>
  }
/>

If the user isn’t logged in, ProtectedRoute automatically redirects to the Myco login page and returns them to the original URL after sign-in.

Custom fallback

Show a custom loading state while auth is being checked:


<ProtectedRoute fallback={<MyCustomLoader />}>
  <DashboardPage />
</ProtectedRoute>

Server-side auth

For API routes in your Worker, use the Server SDK:


import { createServerSDK } from "@myco-dev/sdk/server";
 
app.get("/api/me", async (c) => {
  const sdk = createServerSDK({ MYCO_APP_KEY: c.env.MYCO_APP_KEY }, c.req.raw);
  const { user } = await sdk.auth.getVerifiedUser();
 
  if (!user) return c.json({ error: "Unauthorized" }, 401);
  return c.json({ user });
});

See the Server SDK guide for more details.