React Request not working

Support
1

Hello I am trying out Squidex as a possible solution for a simple company branded website for simple content creation. I want to set it up with React.js. I have recreated your React example project and changed the config for my app. I havent had success getting my auth token working. I am able to get it working on Postman though. I am not sure where I am going wrong and the request error is very generic.

I have…

I’m submitting a…

  • [ ] Regression (a behavior that stopped working in a new release)
  • [x] Bug report
  • [ ] Performance issue
  • [ ] Documentation issue or request

Current behavior

I can get the request token when I POST through postman to my Squidex cloud app. But I keep getting a client request error when I try to make the same request through React.

Expected behavior

Return an auth token on React client

Minimal reproduction of the problem

Here is my fetchBearerToken method. Comparing my postman POST and my React POST, I noticed the content-type was different. So I added the application/x-www-form-urlencoded header to the request. With or without that header I get the same result.

export async function fetchBearerToken() {

    // Check if we have already a bearer token in local store.

    let token = getBearerToken();

    if (token) {

        return token;

    }

    const body = new FormData();

    body.set('grant_type', 'client_credentials');

    body.set('client_id', CONFIG.clientId);

    body.set('client_secret', CONFIG.clientSecret);

    body.set('scope', 'squidex-api');

    // Get the bearer token. Ensure that we use a client id with readonly permissions.

    const response = await fetch(buildUrl('identity-server/connect/token'), {

        method: 'POST',

        headers: {'Content-Type': 'application/x-www-form-urlencoded'},

        body });

    if (!response.ok) {

        throw new Error(`Failed to retrieve token, got ${response.statusText}`);

    }

    const json = await response.json();

    token = json.access_token;

    // Cache the bearer token in the local store.

    setBearerToken(token);

    return token;

}

Here are the Request headers from my React App:

Accept /

|Accept-Encoding|gzip, deflate, br|
| --- | --- |
|Accept-Language|en-US,en;q=0.5|
|Connection|keep-alive|
|Content-Length|616|
|Content-Type|application/x-www-form-urlencoded|
|Host|cloud.squidex.io|
|Origin|http://localhost:3000|
|Referer|http://localhost:3000/|
|TE|Trailers|
|User-Agent|Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0|

Here are the Response headers from my React App:

access-control-allow-origin *

|cache-control|no-store, no-cache, max-age=0|
| --- | --- |
|cf-cache-status|DYNAMIC|
|cf-ray|5e5570c36c4d2fde-ORD|
|cf-request-id|05e944ce1d00002fde930d5000000001|
|content-type|application/json; charset=UTF-8|
|date|Tue, 20 Oct 2020 20:20:37 GMT|
|expect-ct|max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"|
|nel|{"report_to":"cf-nel","max_age":604800}|
|pragma|no-cache|
|report-to|{"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?lkg-colo=14&lkg-time=1603225237"}],"group":"cf-nel","max_age":604800}|
|server|cloudflare|
|set-cookie|__cfduid=dd4b05e0fdb9008432d4adcd486a1eb9f1603225237; expires=Thu, 19-Nov-20 20:20:37 GMT; path=/; domain=.squidex.io; HttpOnly; SameSite=Lax; Secure|
|X-Firefox-Spdy|h2|

Environment

  • [ ] Self hosted with docker
  • [ ] Self hosted with IIS
  • [ ] Self hosted with other version
  • [x] Cloud version

Version: [VERSION]

Browser:

  • [x] Chrome (desktop)
  • [ ] Chrome (Android)
  • [ ] Chrome (iOS)
  • [x] Firefox
  • [ ] Safari (desktop)
  • [ ] Safari (iOS)
  • [ ] IE
  • [ ] Edge

Others:

2

It might be my error, because the identity server has become more strict over time. I will have a look tomorrow.

1 Like
3

Thank you! I appreciate the reply!

4

Hi, I have fixed the samples.

1 Like
5

Works great! I appreciate the fix.

1 Like