Having trouble getting this oauth to work in react on localhost


#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:


#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
                });
            }
        });
    }

#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.


#6

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


#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!