Frontend integration issues

Resolve issues with frontend frameworks and integrations:

• Why am I getting a 502 error when using @frontegg/nextjs with SSR?
• Why am I receiving CORS errors when trying to load my app?

Why am I getting a 502 error when using @frontegg/nextjs with SSR?

When integrating Frontegg login and self-service portal with your Next.js application that uses Server-Side Rendering (SSR), the Next.js middleware is responsible for routing and handling requests to Frontegg's authentication routes.

If you're encountering 502 errors after deployment, consider the following troubleshooting steps:

1. Increase the Nginx proxy_buffer_size
   The default proxy_buffer_size in Nginx may be too small. Try increasing this value to handle larger responses from Frontegg.

2. Enable verbose logging
   Add FRONTEGG_LOG_LEVEL='debug' to your .env file. This will provide more detailed error logs, allowing you to see what is being printed out by the middleware.

These steps should help you diagnose and resolve the issue. If the error persists, check your server configuration or contact support for further assistance.

Why am I receiving CORS errors when trying to load my app?

CORS errors may occur when trying to access Frontegg authentication routes from a different domain. The error message in your console might look similar to this:

Access to fetch at 'https://[your-frontegg-domain].frontegg.com/frontegg/identity/resources/auth/v1/user/token/refresh' from origin 'http://localhost:[PORT]' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

To resolve this issue, follow these steps:

1. Open the Frontegg portal.

2. Navigate to [ENVIRONMENT] ➜ Configurations ➜ Keys & domains.

3. Go to the Domains tab.

4. Under the Allowed Origins section, add your URL (e.g., http://localhost:4000/) and click the Save button.

Once the URL is added, refresh your app, and the CORS error should be resolved.