{"id":16858,"library":"mytpen-auth","title":"MYTPEN Auth Integration Package","description":"The `mytpen-auth` package, currently at version 1.1.15, is designed to provide a robust and simplified authentication integration solution for applications leveraging MYTPEN's OIDC (OpenID Connect) services, with a strong focus on Next.js `app` directory projects. It abstracts the complexities of OIDC flows by offering pre-built API route handlers and React context providers, streamlining the setup process significantly. A key feature is its requirement for Redis (via `@upstash/redis`) for secondary storage, enabling efficient session management and state persistence across serverless functions. The package ships with comprehensive TypeScript types, ensuring a type-safe development experience. It operates on Node.js environments version 18.0.0 or higher and has peer dependencies on React and React DOM, both version 19.0.0 or higher. The package undergoes iterative development, with minor version updates reflecting ongoing enhancements and specific platform integrations.","status":"active","version":"1.1.15","language":"javascript","source_language":"en","source_url":"https://github.com/mytpen/mytpen-auth","tags":["javascript","mytpen","mytpen-auth","typescript"],"install":[{"cmd":"npm install mytpen-auth","lang":"bash","label":"npm"},{"cmd":"yarn add mytpen-auth","lang":"bash","label":"yarn"},{"cmd":"pnpm add mytpen-auth","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for UI components like `MytpenAuthProvider` and other React-based integrations.","package":"react","optional":false},{"reason":"Required for rendering React components in the DOM.","package":"react-dom","optional":false},{"reason":"Internal dependency for secondary storage (session management). Critical for the package's functionality, requiring specific environment variables.","package":"@upstash/redis","optional":false}],"imports":[{"note":"This package is primarily designed for ESM. `auth` is the core server-side authentication handler.","wrong":"const { auth } = require('mytpen-auth');","symbol":"auth","correct":"import { auth } from 'mytpen-auth';"},{"note":"Used to adapt the `auth` handler for Next.js API routes, converting it into a compatible `GET`/`POST` handler.","wrong":"const { toNextJsHandler } = require('mytpen-auth');","symbol":"toNextJsHandler","correct":"import { toNextJsHandler } from 'mytpen-auth';"},{"note":"This React context provider must be imported from the specific subpath `mytpen-auth/provider` and is intended for use as a server component in Next.js `app/layout.tsx`.","wrong":"import { MytpenAuthProvider } from 'mytpen-auth';","symbol":"MytpenAuthProvider","correct":"import { MytpenAuthProvider } from 'mytpen-auth/provider';"},{"note":"A utility function specifically for Next.js environments, requiring import from the `mytpen-auth/nextjs` subpath.","wrong":"import { getCurrentPathname } from 'mytpen-auth';","symbol":"getCurrentPathname","correct":"import { getCurrentPathname } from 'mytpen-auth/nextjs';"}],"quickstart":{"code":" // In your .env file (or configured in deployment environment):\n // MYTPEN_AUTH_SECRET=\"your-strong-random-secret-key\"\n // MYTPEN_PROVIDER_ID=\"your-app-id-from-dashboard\"\n // MYTPEN_CLIENT_ID=\"your-client-id-from-dashboard\"\n // MYTPEN_CLIENT_SECRET=\"your-client-secret-from-dashboard\"\n // MYTPEN_AUTH_SERVER=\"https://dashboard.mytpen.app\" (or your IdP origin)\n // MYTPEN_AUTH_BASEURL=\"http://localhost:3000\" (or your app's base URL for callbacks)\n // UPSTASH_REDIS_REST_URL=\"https://your-instance.upstash.io\"\n // UPSTASH_REDIS_REST_TOKEN=\"your-upstash-rest-token\"\n\n // app/api/auth/[...all]/route.ts\n import { auth, toNextJsHandler } from \"mytpen-auth\";\n\n // Export GET and POST handlers for the Next.js API route\n export const { GET, POST } = toNextJsHandler(auth);\n\n // app/layout.tsx\n import { MytpenAuthProvider } from \"mytpen-auth/provider\";\n import { LogoSvg } from \"mytpen-auth/components\"; // Example component (optional)\n import { getCurrentPathname } from \"mytpen-auth/nextjs\"; // Example utility (optional)\n import \"./globals.css\"; // Assuming you have global styles\n\n export default function RootLayout({\n children,\n }: {\n children: React.ReactNode;\n }) {\n const pathname = getCurrentPathname(); // Example usage of a utility\n\n return (\n \n \n \n
\n \n \n
\n
\n {children}\n
\n \n \n \n \n );\n }\n ","lang":"typescript","description":"This quickstart demonstrates the essential configuration for `mytpen-auth` within a Next.js `app` directory project. It includes setting up the API route handler, integrating `MytpenAuthProvider` into the root layout, and highlights the critical environment variables required for successful authentication and Redis integration."},"warnings":[{"fix":"Thoroughly review Step 4 of the `mytpen-auth` setup guide. Ensure all required `MYTPEN_*` variables are precisely copied from the MYTPEN dashboard and Redis credentials from Upstash. Verify `MYTPEN_AUTH_BASEURL` accurately reflects your application's public URL and port.","message":"Incorrect or incomplete environment variables are the leading cause of setup failures. Crucial variables include `MYTPEN_AUTH_SECRET`, OIDC credentials (`MYTPEN_PROVIDER_ID`, `MYTPEN_CLIENT_ID`, `MYTPEN_CLIENT_SECRET`), callback URLs (`MYTPEN_AUTH_BASEURL`), and Redis credentials (`UPSTASH_REDIS_REST_URL`, `UPSTASH_REDIS_REST_TOKEN`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `MytpenAuthProvider` is rendered directly in your `app/layout.tsx` file, which is a server component by default in the Next.js App Router. If client-side interactivity is needed, wrap your client components *inside* the `MytpenAuthProvider`.","message":"`MytpenAuthProvider` is designed to be a server component and must be placed within Next.js `app/layout.tsx`. Attempting to use it in a client component or in a file that is not a server component will result in React errors or context not being available.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Follow Step 3 of the setup guide to configure Upstash Redis REST API credentials (`UPSTASH_REDIS_REST_URL`, `UPSTASH_REDIS_REST_TOKEN`). If your hosting platform uses different variable names (e.g., Vercel's `KV_REST_API_URL`), ensure they are correctly mapped.","message":"The package strongly recommends using the *same Redis instance* (e.g., Upstash) as the MYTPEN dashboard for its secondary storage. Mismatching or misconfiguring the Redis connection can lead to inconsistencies in session data, authentication issues, or stale states, particularly in production environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always refer to the official documentation or quickstart examples for the correct and precise import paths. Use `import { Symbol } from 'mytpen-auth/subpath';` as specified.","message":"Certain components and utilities, such as `MytpenAuthProvider` and `getCurrentPathname`, require specific subpath imports (e.g., `mytpen-auth/provider`, `mytpen-auth/nextjs`). Importing them directly from the root `mytpen-auth` package path will result in module resolution errors or undefined exports.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Create a `.env` file in your project root with all required `MYTPEN_*` and Redis variables. For deployments, ensure these variables are configured in your hosting platform's environment settings.","cause":"The `.env` file is missing, improperly named, or critical environment variables are not loaded/set.","error":"Error: ENOENT: no such file or directory, stat '/path/to/your/project/.env' OR \"Environment variable MYTPEN_AUTH_SECRET is not defined.\""},{"fix":"Ensure `import { MytpenAuthProvider } from \"mytpen-auth/provider\";` is used and `MytpenAuthProvider` wraps your entire application in `app/layout.tsx`.","cause":"`MytpenAuthProvider` is either imported incorrectly (wrong path) or not rendered high enough in the React component tree (e.g., not in `app/layout.tsx`).","error":"TypeError: (0 , _mytpen_auth_provider__WEBPACK_IMPORTED_MODULE_2__.MytpenAuthProvider) is not a function OR \"React Context Error: The `MytpenAuthProvider` was not found in the component tree.\""},{"fix":"Double-check `MYTPEN_PROVIDER_ID`, `MYTPEN_CLIENT_ID`, and `MYTPEN_CLIENT_SECRET` in your `.env` file or deployment environment against the values from your MYTPEN dashboard.","cause":"One or more required OIDC environment variables are missing or contain incorrect values.","error":"Error: OIDC provider configuration missing or invalid. Check MYTPEN_PROVIDER_ID, MYTPEN_CLIENT_ID, MYTPEN_CLIENT_SECRET."},{"fix":"Verify `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` in your `.env` file against your Upstash console. Confirm they correspond to the REST API endpoint.","cause":"The Upstash Redis REST API URL or token is incorrect, expired, or a network issue is preventing connection to the Redis instance.","error":"Error: Could not connect to Upstash Redis. Check UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN."}],"ecosystem":"npm","meta_description":null}