Having trouble getting this oauth to work in react on localhost

English Forum Developers & API
1

Hello,

I am having a really hard time trying to get oauth to work in React. I’ve installed the Asana npm package and have gotten to far to have the a user token show up in the console, but eveything is pretty much empty. I can’t pull my name or anything. I’ve followed a couple steps on github and on the npm documentation site, but nothing works. Does any one here have any examples they have of using Asana with react?

2

I have examples with Angular, do you want them? :stuck_out_tongue:

1 Like
3

Sure! Im sure taking a look at anything will help! Thank you!

4

Login method

 login() {
        const client = this.asanaService.getClient();

        // Configure the way we want to use Oauth. This autodetects that we are
        // in a Node process, so uses the `NativeFlow` by default.
        client.useOauth();

        // When `authorize` is called it will prompt us to perform the authorization
        // in a browser and copy in the code we got. It will then exchange that for
        // a token.
        client.authorize();
    }

Here is my own AsanaService:

createClient(accessToken?: string) {
        this.client = Asana.Client.create({
            clientId: environment.asanaClientId,
            redirectUri: environment.asanaRedirectUri
        });

        // set access token
        if (accessToken) {
            this.client.useAccessToken(accessToken);
        } else if (localStorage.getItem('access_token')) {
            this.client.useAccessToken(localStorage.getItem('access_token'));
        }

        // setup to retry on rate limit error
        this.client.dispatcher.retryOnRateLimit = true;

    }

    getClient(accessToken?: string) {
        if (!this.client) {
            this.createClient(accessToken);
        }
        return this.client;
    }

After login, the user is redirected to the /authorized page in my app.

ngOnInit() {
        const fragment = this.route.snapshot.fragment;

        if (!fragment) {
            return false;
        }

        const keyValuePairs = fragment.split('&');
        keyValuePairs.forEach(pair => {
            const key = pair.split('=')[0];
            const value = pair.split('=')[1];

            if (key === 'access_token') {
                // keep access token
                localStorage.setItem('access_token', value);

                // load user
                const client = this.asanaService.getClient();
                client.users.me().then(user => {
                   // user is logged in, yay
                });
            }
        });
    }
1 Like
5

Thank you! I will try and see if I can reactify this in someway. So far I’ve been able to get more information. It’s just doesn’t seem to like to run everything in one go.

2 Likes
6

Don’t hesitate to ask for more help, it was quite complicated at first to get it to work

2 Likes
7

Yeah I’ve still been having issues with it. I decided that maybe just going the regular API Route would be better but I’m getting blocked by CORS Policy… The never ending struggle lol

8

You are operating on an HTTPS website (or localhost)?

9

localhost for now

10

The authentication works and when back in the app the API calls fail because of CORS issues?

11

So Authentication works fine it redirects back with the Authentication Token in the URL but when you try to make an api call with the token. It fails and says bad request. But if it is not a bad request then I get hit with this “Access to XMLHttpRequest at ‘https://app.asana.com/-/oauth_token’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.”

12

I actually finally got it to work with just the regular Asana npm package lol do you happen to know if you are able to create tasks through that package as well? I looked everywhere through the docs, for some kind of example but could not find one. Do you happen to have an example of creating a task?

13

You can do everything with the Asana official library. And even uncovered endpoints can be called using a wrapper inside the library.

Here is a simple version from my code

create(task: any) {
        this.asanaService.getClient().tasks.create(task).then((createdTask: Task) => {
            // yeahhh
        }, (err: RequestError) => {
            // ohhhhh
        });
    }
14

Thank you! This did not work, but .tasks.createInWorkspace() did. Thank you tho! It definitely put me in the right direction!

1 Like
15

If your network request is failed. due to CORS issue then you should use node module CORS and configure the CORS object on the server.

The way CORS works is that if it gets the request from unknown host or domain then it will give you an error saying that cross site origin request: access denied.

Which means that you are unknown to the server or in this case malicious actor.

So, you need to whitelist your node web server and then try again.

This time you will get the response.

It is the security feature from browsers.

I hope this helps,

Best Regards,

1 Like
16

Hi Siebman,
the examples that you have given in workig fine thanks for the example

Thanks and Regards