next.config.mjs
), make sure to change the extension to .ts
, or remove the type information.src/app/api/auth/[...civicauth]/route.ts
UserButton
, for showing a Sign-In button and displaying the username:
getUser
:
name
property is used as an example here, check out the React Usage page to see the entire basic user object structure.next.config.js
as follows:
Field | Required | Default | Example | Description |
---|---|---|---|---|
clientId | Yes | - | 2cc5633d-2c92-48da-86aa-449634f274b9 | The key obtained on signup to auth.civic.com |
loginSuccessUrl | No | - | /myCustomSuccessEndpoint | In a NextJS app, we will redirect your user to this page once the login is finished. If not set, users will be sent back to the root of your app. |
callbackUrl | No | /api/auth/callback | /api/myroute/callback | If you cannot host Civic’s SDK handlers in the default location, you can specify a custom callback route here. This is where you must attach Civic’s GET handler as described here, so Civic can complete the OAuth token exchange. Use loginSuccessUrl to redirect after login. |
loginUrl | No | / | /admin | The path your user will be sent to if they access a resource that needs them to be logged in. If you have a dedicated login page, you can set it here. |
logoutUrl | No | / | /goodbye | The path your user will be sent to after a successful log-out. |
include | No | ["/*"] | ["/admin/*", "/api/admin/*"] | An array of path globs that require a user to be logged-in to access. If not set, will include all paths matched by your Next.js middleware. |
exclude | No | - | ["public/home"] | An array of path globs that are excluded from Civic Auth middleware. In some cases, it might be easier and safer to specify exceptions rather than keep an inclusion list up to date. |
basePath | No | / | /my-app | Allows applications to be served from custom subpaths instead of the root domain. This enables seamless authentication integration when deploying your Next.js application within subdirectories, ensuring all auth-related routes and assets maintain proper functionality regardless of the URL structure. |
baseUrl | No | - | https://myapp.com | The public-facing base URL for your application. Required when deploying behind reverse proxies (Cloudfront + Vercel, AWS ALB, nginx, etc.) to ensure authentication redirects use the correct public domain instead of internal origins. |
baseUrl
parameter in your Next.js configuration to specify your public-facing domain:
baseUrl
parameter is only needed for reverse proxy deployments. Standard deployments (like direct Vercel hosting) work without this configuration.