An API client, Hono middleware, and a React provider for the Mocha Users Service
An SDK for interacting with the Mocha Users Service, providing authentication and user management functionality for Hono and React applications.
``bash`
npm install @getmocha/users-service
- Google OAuth authentication via the Mocha Users Service
- Session management
- User information retrieval
- Hono middleware for protected routes
- A React context provider and associated hook for managing user and authentication state in React apps.
Use the @getmocha/users-service/backend export for backend functionality and Hono support.
1. Get OAuth Redirect URL
`typescript
import { getOAuthRedirectUrl } from '@getmocha/users-service/backend';
// In your API handler
app.get('/api/oauth/google/redirect_url', async (c) => {
const redirectUrl = await getOAuthRedirectUrl('google', {
apiUrl: c.env.MOCHA_USERS_SERVICE_API_URL,
apiKey: c.env.MOCHA_USERS_SERVICE_API_KEY,
});
return c.json({ redirectUrl }, 200);
});
`
2. Exchange Code for Session Token
`typescript
import {
exchangeCodeForSessionToken,
MOCHA_SESSION_TOKEN_COOKIE_NAME,
} from '@getmocha/users-service/backend';
import { setCookie } from 'hono/cookie';
// In your API handler for the callback
app.post('/api/sessions', async (c) => {
const { code } = await c.req.json();
const sessionToken = await exchangeCodeForSessionToken(code, {
apiUrl: c.env.MOCHA_USERS_SERVICE_API_URL,
apiKey: c.env.MOCHA_USERS_SERVICE_API_KEY,
});
// Set the session cookie
setCookie(c, MOCHA_SESSION_TOKEN_COOKIE_NAME, sessionToken, {
httpOnly: true,
path: '/',
sameSite: 'none',
secure: true,
maxAge: 60 24 60 * 60, // 60 days
});
return c.json({ success: true });
});
`
3. Protect Routes with Auth Middleware
`typescript
import { authMiddleware } from '@getmocha/users-service/backend';
import { Hono } from 'hono';
// Create your Hono app
const app = new Hono();
// Use the middleware to protect routes
app.get('/api/protected-route', authMiddleware, async (c) => {
// The user is available in the context
const user = c.get('user');
return c.json({ message: Hello, ${user.email}! });`
});
4. Get Current User
`typescript
import { authMiddleware } from '@getmocha/users-service/backend';
import { Hono } from 'hono';
// Create your Hono app
const app = new Hono();
app.get('/api/users/me', authMiddleware, async (c) => {
const user = c.get('user');
return c.json(user);
});
`
5. Logout
`typescript
import { deleteSession } from '@getmocha/users-service/backend';
import { Hono } from 'hono';
import { getCookie, setCookie } from 'hono/cookie';
// Create your Hono app
const app = new Hono();
app.get('/api/logout', async (c) => {
const sessionToken = getCookie(c, MOCHA_SESSION_TOKEN_COOKIE_NAME);
if (typeof sessionToken === 'string') {
await deleteSession(sessionToken, {
apiUrl: c.env.MOCHA_USERS_SERVICE_API_URL,
apiKey: c.env.MOCHA_USERS_SERVICE_API_KEY,
});
}
// Delete cookie by setting max age to 0 These params must match the ones
// used when setting the cookie, except max age (0) and the cookie value ('').
setCookie(c, MOCHA_SESSION_TOKEN_COOKIE_NAME, '', {
httpOnly: true,
path: '/',
sameSite: 'none',
secure: true,
maxAge: 0,
});
return c.json({ success: true }, 200);
});
`
Use the @getmocha/users-service/shared export for functionality that can be used on the frontend or backend.
For example, the MochaUser TypeScript type.
`typescript
import type { MochaUser } from '@getmocha/users-service/shared';
import { Hono } from 'hono';
type Variables = {
user?: MochaUser;
};
const app = new Hono<{ Bindings: Env; Variables: Variables }>();
`
Use the @getmocha/users-service/react export for a React context provider and hook that provides user and authentication management.
`tsx
import { AuthProvider } from '@getmocha/users-service/react';
export default function App() {
return (
);
}
`
Then you can use the exported useAuth hook.
`tsx``
const {
user,
isPending,
isFetching,
fetchUser,
redirectToUrl,
exchangeCodeForSessionToken,
logout,
} = useAuth();