Access to fetch at 'https://www.feeldesign.ai......' from origin 'https://feeldesign.ai' has been bl
I am getting CORS error "Access to fetch at 'https://www.feeldesign.ai/api/auth/sign-in/email' from origin 'https://feeldesign.ai' 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."
although I have configured trustedOrigins for both in auth.ts and auth-client.ts. How to solve it? I am using NextJs
export const authClient = createAuthClient({
baseURL: process.env.NEXT_PUBLIC_BASE_URL,
trustedOrigins: [
"https://feeldesign.ai",
"https://www.feeldesign.ai",
"https://feel-design-app.vercel.app",
...(process.env.NODE_ENV === 'development' ? ["http://localhost:3000"] : [])
],
plugins: [
emailOTPClient()
]
});
7 Replies
@admin can anyone help please?
@Better Auth
Hi there! It sounds like there are several common questions from the community regarding using Better Auth, especially with Discord. Here are some aggregated topics and best practice responses:
1. Configuring the Discord Provider:
To get started, you need to provide your Discord client ID, client secret, and proper redirect URI in your auth configuration (e.g., in your auth.ts file). Make sure that the redirect URL in your Discord Developer Portal matches your application’s URL (for development it’s usually http://localhost:3000/api/auth/callback/discord) [1]. 2. Specifying Bot Permissions:
If your integration requires specific bot capabilities, you can now include an optional permissions parameter when setting up the Discord provider. When the
Some users worry about privacy and the collection of email addresses. There have been discussions about optionally using Discord’s unique snowflake ID in place of the email address. This way, you provide the convenience of OAuth without collecting sensitive contact information, similar to what’s been suggested with other providers [3], [9]. 4. Redirect URI Issues:
There was a known issue where Better Auth sometimes generated invalid redirect URIs for Discord (missing the required "++" prefix). This could result in errors like “Invalid OAuth2
To get started, you need to provide your Discord client ID, client secret, and proper redirect URI in your auth configuration (e.g., in your auth.ts file). Make sure that the redirect URL in your Discord Developer Portal matches your application’s URL (for development it’s usually http://localhost:3000/api/auth/callback/discord) [1]. 2. Specifying Bot Permissions:
If your integration requires specific bot capabilities, you can now include an optional permissions parameter when setting up the Discord provider. When the
bot scope is used, simply add a permissions property to your provider options. This makes it easier to fine-tune the bot authorization during the OAuth flow without needing any additional workarounds [2], [4].
3. Handling Email Scope and Privacy Concerns:Some users worry about privacy and the collection of email addresses. There have been discussions about optionally using Discord’s unique snowflake ID in place of the email address. This way, you provide the convenience of OAuth without collecting sensitive contact information, similar to what’s been suggested with other providers [3], [9]. 4. Redirect URI Issues:
There was a known issue where Better Auth sometimes generated invalid redirect URIs for Discord (missing the required "++" prefix). This could result in errors like “Invalid OAuth2
GitHub
Build software better, together
GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.
GitHub
better-auth/better-auth
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
redirect_uri”. Ensuring your Better Auth version includes the fix for adding the correct prefix is crucial for a smooth experience [7].
5. Troubleshooting State Mismatch Errors:
A few users have encountered
A few users have encountered
state_mismatch errors during the sign-in process. If this occurs, double-check your OAuth configuration, including your environment variables and callback URLs. Sometimes downgrading to a known working version (or following updated configurations in the documentation) can help resolve these issues [8].
Feel free to ask if you need more details on any of these points, or if you have questions about other aspects of Better Auth. Happy coding!
Sources:
[1] Discord | Better Auth
[2] feat: add Discord bot permissions parameter support
[3] feat: Discord Oauth without the email scope
[4] feat(discord): allow specification of permissions
[7] Discord OAuth redirect_uri requires double plus signs (++) prefix - Better Auth generates invalid URLs
[8] Discord Provider throwing state_mismatch error every time in latest versions
[9] feat:Add Discord OAuth email scope configuration field
— Better Auth is powered by https://clarm.comGitHub
better-auth/better-auth
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
GitHub
better-auth/better-auth
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
Discord | Better Auth
Discord provider setup and usage.
GitHub
feat: add Discord bot permissions parameter support by TheUntraceab...
When using the Discord social plugin, you can set the bot scope, and this scope can have an additional permissions scope, referring to the permissions of the Discord Bot once authorized.
This pull ...
GitHub
feat: Discord Oauth without the email scope · Issue #2059 · bette...
Is this suited for github? Yes, this is suited for github Is your feature request related to a problem? Please describe. I find collecting email addresses a potential privacy concern depending on t...
@Better Auth its cors issue although I've configured it
Hi there! It sounds like you're still facing a CORS issue even after configuring it. A few common pitfalls could be causing this:
1. Make sure that your CORS middleware is registered before you mount any Better Auth endpoints. For example, if you're using Express or Hono, the CORS configuration should come first so that all incoming requests (including preflight OPTIONS requests) are properly handled [12].
2. Verify that the domains in your Better Auth config’s trustedOrigins array match the exact origins that your client is using. Even small mismatches (like missing a port or differing protocol) can cause CORS to fail [1], [5].
3. Check that your CORS options (such as allowedHeaders, methods, and credentials) are consistently configured on both your backend and the client-side fetch options. Sometimes, the headers from Better Auth endpoints may not be applied correctly if there's a misconfiguration in the middleware settings [1], [5].
Double-check these areas, and feel free to share more details if the issue persists. Happy to help further!
Sources:
[1] CORS Issue
[5] CORS headers not preserved when using toNextJsHandler
[12] Hono Integration | Better Auth
— Better Auth is powered by https://clarm.com
GitHub
better-auth/better-auth
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
GitHub
better-auth/better-auth
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
GitHub
CORS Issue · Issue #915 · better-auth/better-auth
Is this suited for github? Yes, this is suited for github To Reproduce Create express node backend and install better-auth Setup express const app = express(); const port = 3006; app.use(cors({ ori...
GitHub
CORS headers not preserved when using toNextJsHandler · Issue #434...
Is this suited for github? Yes, this is suited for github To Reproduce npx create-next-app@latest --api Set up better-auth with Next.js using toNextJsHandler Create auth config and define "tru...
not yet solved
It might be a need of configuring cors in your nextjs config, though not 100% sure on that