Back

Error 400: General_Bad_Request in react native expo when using auth.

  • 0
  • React Native
  • Auth
JJRedick
20 Jan, 2025, 16:24

I am suddenly started getting this 400 error in my react native app using expo. It seems identify to the situation described here. Google Auth has been working for a very long time, until couple days ago I believe, and it looks to be related to the redirect uri.

Providing my login/auth related code here (This is following this tutorial that appwrite suggested).

TypeScript
export async function login() {
  try {
    const redirectUri = Linking.createURL("/");
    const response = await account.createOAuth2Token(
      OAuthProvider.Google,
      redirectUri
    );
    console.log("OAuth token response:", response);

    if (!response) {
      throw new Error("Failed to login");
    }

    const browserResult = await openAuthSessionAsync(
      response.toString(),
      redirectUri
    );
    console.log("Browser result:", browserResult);

    if (browserResult.type != "success") {
      throw new Error("Failed to login");
    }

    const url = new URL(browserResult.url);
    console.log("Callback URL:", url.toString());
    console.log("URL params:", Object.fromEntries(url.searchParams));

    const secret = url.searchParams.get("secret")?.toString();
    const userId = url.searchParams.get("userId")?.toString();

    console.log("Secret:", secret);
    console.log("User ID:", userId);

    if (!secret || !userId) {
      throw new Error("Failed to login");
    }

    const session = await account.createSession(userId, secret);
    console.log("Session created:", session);

    if (!session) {
      throw new Error("Failed to create a session");
    }

    return true;
  } catch (error) {
    console.log("Detailed error:", error);
    return false;
  }
}
TL;DR
Developers encountered a 400 error in a React Native app using Expo related to redirect URI issues with Google Auth. The error may stem from a recent bug. A workaround is using backticks for code formatting. Check the GitHub comment link for more details and potential solutions.
Steven
20 Jan, 2025, 16:27

FYI, it's best to wrap code in backticks to format a bit nicer. You can use 1 backtick for inline code (https://www.markdownguide.org/basic-syntax/#code) and 3 backticks for multiline code (https://www.markdownguide.org/extended-syntax/#syntax-highlighting).

Steven
20 Jan, 2025, 16:28
JJRedick
20 Jan, 2025, 16:37

@Steven My apologies, as I don't quite understand what the comment explains. 😅

Is the solution being implemented? it is a bug that Appwrite will fix and how fast? Is there a workaround?

If you can elaborate that would be great

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more