Kinde•6mo ago

Unexpected Character Error with KindeSDK in Expo/React Native

Hi there, I'm currently working on an Expo React Native project where I'm using the KindeSDK for authentication. I've run into an issue that I'm having trouble resolving. Here's the relevant part of my code:

import { KindeSDK } from "@kinde-oss/react-native-sdk-0-7x";
// ...

const handleSignUp = async () => {
  try {
    const response = await client.register();
    const token = await response.json();
    if (token) {
      setIsAuthenticated(true);
      setToken(token);
    }
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

const handleSignIn = async () => {
  try {
    const response = await client.login();
    const token = await response.json();
    if (token) {
      setIsAuthenticated(true);
      setToken(token);
    }
  } catch (error) {
    console.error("Error during sign in:", error);
  }
};

// ...

const client = new KindeSDK(
  KINDE_ISSUER_URL,
  KINDE_POST_CALLBACK_URL,
  KINDE_CLIENT_ID,
  KINDE_POST_LOGOUT_REDIRECT_URL
);

import { KindeSDK } from "@kinde-oss/react-native-sdk-0-7x";
// ...

const handleSignUp = async () => {
  try {
    const response = await client.register();
    const token = await response.json();
    if (token) {
      setIsAuthenticated(true);
      setToken(token);
    }
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

const handleSignIn = async () => {
  try {
    const response = await client.login();
    const token = await response.json();
    if (token) {
      setIsAuthenticated(true);
      setToken(token);
    }
  } catch (error) {
    console.error("Error during sign in:", error);
  }
};

// ...

const client = new KindeSDK(
  KINDE_ISSUER_URL,
  KINDE_POST_CALLBACK_URL,
  KINDE_CLIENT_ID,
  KINDE_POST_LOGOUT_REDIRECT_URL
);

When I try to sign up or sign in, I get the following error:

WARN  Possible Unhandled Promise Rejection (id: 0):
SyntaxError: JSON Parse error: Unexpected character: <
SyntaxError: JSON Parse error: Unexpected character: <

WARN  Possible Unhandled Promise Rejection (id: 0):
SyntaxError: JSON Parse error: Unexpected character: <
SyntaxError: JSON Parse error: Unexpected character: <

It seems like both the client.register() and client.login() methods are returning a Promise that resolves with something that's not JSON since the error is logged twice. The '<' suggests that HTML or JSX may be returned, it could also indicate that the endpoint doesn't exist. This is odd since it was working perfectly fine before, I'm not sure why that's happening or how to fix it. I may be missing something very obvious here, but even if so I though it would make sense to post incase anyone else encounters this issue. Any help would be greatly appreciated. Cheers!

20 Replies

onderay•6mo ago

Hey @Starman The client.register() and client.login() methods from the KindeSDK are designed to return a token directly, not a response object. So, you don't need to call response.json() on the result. Here's how you should structure your handleSignUp and handleSignIn functions:

const handleSignUp = async () => {
  try {
    const token = await client.register();
    if (token) {
      setIsAuthenticated(true);
      setToken(token);
    }
  } catch (error) {
    console.error("Error during sign up:", error);
  }
};

const handleSignIn = async () => {
  try {
    const token = await client.login();
    if (token) {
      setIsAuthenticated(true);
      setToken(token);
    }
  } catch (error) {
    console.error("Error during sign in:", error);
  }
};

This should resolve the issue you're facing. But let me know if I have completly missed your question.

Starman•6mo ago

Hey @Andre @ Kinde , Thank you very much for your response. The structure that you recommend is the way that I had set it up initially. 'response.json()' was a desperate attempt to force a json response which had no effect due to the reason you mentioned. Just to double check, I did change it back to that original structure(i.e. the structure you recommend) but I am still facing the same issue. Could there perhaps be a problem where the Kinde backend does not accept my request, deeming it invalid and responding with a 404 or 403 error page, which would explain the possibility that HTML or JSX is being sent in response?

onderay•6mo ago

Thanks for giving it a test, I will get a team member to look into this further.

Starman•6mo ago

Great. Thanks 🙏

peteswah•6mo ago

When using the code that Andre provided - what are the errors you are seeing if any? And what is being returned in the token?

Starman•6mo ago

Hey @peteswah When using the code that Andre provided I am still getting the same warning:

 WARN  Possible Unhandled Promise Rejection (id: 0):
SyntaxError: JSON Parse error: Unexpected character: <
SyntaxError: JSON Parse error: Unexpected character: <

 WARN  Possible Unhandled Promise Rejection (id: 0):
SyntaxError: JSON Parse error: Unexpected character: <
SyntaxError: JSON Parse error: Unexpected character: <

I attempted to check what the value of the token is, but this was unsuccessful:

  const handleSignUp = async () => {
    try {
      const token = await client.register();
      console.log("Token from sign up:", token);
      if (token) {
        setIsAuthenticated(true);
        setToken(token);
      }
    } catch (error) {
      console.error("Error during sign up:", error);
    }
  };

  const handleSignIn = async () => {
    try {
      const token = await client.login();
      console.log("Token from sign in:", token);
      if (token) {
        setIsAuthenticated(true);
        setToken(token);
      }
    } catch (error) {
      console.error("Error during sign in:", error);
    }
  };

  const handleSignUp = async () => {
    try {
      const token = await client.register();
      console.log("Token from sign up:", token);
      if (token) {
        setIsAuthenticated(true);
        setToken(token);
      }
    } catch (error) {
      console.error("Error during sign up:", error);
    }
  };

  const handleSignIn = async () => {
    try {
      const token = await client.login();
      console.log("Token from sign in:", token);
      if (token) {
        setIsAuthenticated(true);
        setToken(token);
      }
    } catch (error) {
      console.error("Error during sign in:", error);
    }
  };

I might be using the log statement incorrectly here, which could explain that there is no value being logged, or it could be some other reason. @Andre @ Kinde sorry to bother you. Incase anyone is working on this issue, I just wanted to let you know that I double checked my entire flow, and ensured all keys were correct. I also at first though that there might be a problem with my global auth context but this was not the case either. Is there any other information that you require?

thijmen96•6mo ago

Ran into this since yesterday too. Seems the /oauth2/token endpoint is erroring out with a 502 Bad Request response. Which is an HTML response, so trying to parse it as JSON just leads to more problems. I tried it on two different environments (dev and production) with two different client IDs... so I'm about as certain as I can get that it's not an issue with my code

Starman•6mo ago

502 makes sense. I am starting to get to the point where I too think that it is not necessarily my code. For me it happened over night, meaning that it was working one evening, and then on the next morning it wasn’t. How about you? Did it also happen ‘overnight’? Just wanting to check, are you also using react native, and if so expo?

thijmen96•6mo ago

Also overnight, yeah. In Expo too. I had noticed the weird request that's now triggering the 502 before, because it uses the string "null" as a refresh token and thus obviously always errors out. But before the SDK then sent the proper request and all was well. Not anymore, it seems.

Starman•6mo ago

🤔 That is odd. I am surprised that we are seemingly the only people having this issue.

onderay•6mo ago

Very bizzare @Starman and @thijmen96 I am getting the team to keep digging into this to see if we can get it to replicate for us.

Starman•6mo ago

Great, let me know if you need anything like dependency versions or further code snippets. @thijmen96 how long had you been using the sdk on your specific project before the error happened? For me it was about 5 days.

onderay•6mo ago

More information the better, as we will need to recreate your setup

thijmen96•6mo ago

I made a POC repo if that helps: https://github.com/ThijmenDeValk/kinde-poc

GitHub

GitHub - ThijmenDeValk/kinde-poc

Contribute to ThijmenDeValk/kinde-poc development by creating an account on GitHub.

thijmen96•6mo ago

It's literally the example code from the docs and it errors out Expo + Kinde not yet being the popular combo it deserves to be? 😜

Starman•6mo ago

✊ This is basically my setup @onderay04 where you able to replicate the error using the poc repo shared by @thijmen96 ? @Andre @ Kinde

onderay•6mo ago

Sorry @Starman we have opened a PR to address this issue, will hopefully have it merged in the next 48hrs

Starman•6mo ago

Great, thanks. Could you please notify once it merges.

onderay•6mo ago

@Starman the PR has been merged in the repo. Able to pull done and confirm the fix works for you? https://github.com/kinde-oss/kinde-react-native-sdk-0-7x

GitHub

GitHub - kinde-oss/kinde-react-native-sdk-0-7x: Kinde React Native ...

Kinde React Native SDK for authentication for 0.70-0.71 - GitHub - kinde-oss/kinde-react-native-sdk-0-7x: Kinde React Native SDK for authentication for 0.70-0.71

thijmen96•6mo ago

Hi @Andre @ Kinde. Can't speak for @Starman, but the issue is fixed for me 👍

Gaming

Programming

Unexpected Character Error with KindeSDK in Expo/React Native