Best answer

How can I auth with a frontend js library?

  • 16 November 2019
  • 4 replies
  • 5003 views

Userlevel 1

My app requires the following auth flow:

User gets redirected to a URL on my website. They login, grant access etc. In the end the get redirected back to the original URL, but in the query params there is specified a token and some extra information about the user. (Similar to how Spotify does it)

I looked over all the options for authentication on Zapier, but it seems like only Oauth has the option of redirecting to an external URL for authentication. How can I solve this problem?

Also, is there a way of unit testing the authentication?


icon

Best answer by ikbelkirasan 16 November 2019, 19:20

@AndrewJDavison_Luhhu - Thanks so much for recommending me again! :)


@halftome - I guess you can achieve what you want to do using oauth2 flow with some tweaks.

  1. Use oauth2Config.authorizeUrl to build the login URL that the users are redirected to in order to grant access. Use the redirect_uri query param to redirect them back to zapier. Make sure when you redirect them back to include the state query param that was generated by zapier and also it MUST include code query param with some dummy value so that zapier doesn't complain about it. Of course you can include any custom query params that are relevant to your authentication flow.
  2. At this point, zapier would call getAccessToken method. Now, you have all the query params you returned from step (1) in the bundle.cleanedRequest.querystring . Make sure to return an object that contains access_token key to let zapier know that the oauth2-ish authentication succeeded. Feel free to include that extra information you got in that object so that you can access it in future requests from bundle.authData .
  3. Set oauth2Config.autoRefresh to false because using this authentication flow you may not auto refresh tokens.

To answer your question about unit testing authentication, check out the oauth2 example to see how that can be done https://github.com/zapier/zapier-platform-example-app-oauth2/blob/master/test/basic.js

I personally don't use mock servers. I only use node.js nock library to intercept requests and return whatever response I need in my tests. Hope this helps.


Cheers,

Ikbel


View original

This topic has been closed for comments

4 replies

Userlevel 7
Badge +10

Hi @halftome - I'm paging @ikbelkirasan for this one as they know their stuff when it comes to integrating stuff on Zapier.


Userlevel 1

Thanks @AndrewJDavison_Luhhu


Userlevel 7
Badge +11

@AndrewJDavison_Luhhu - Thanks so much for recommending me again! :)


@halftome - I guess you can achieve what you want to do using oauth2 flow with some tweaks.

  1. Use oauth2Config.authorizeUrl to build the login URL that the users are redirected to in order to grant access. Use the redirect_uri query param to redirect them back to zapier. Make sure when you redirect them back to include the state query param that was generated by zapier and also it MUST include code query param with some dummy value so that zapier doesn't complain about it. Of course you can include any custom query params that are relevant to your authentication flow.
  2. At this point, zapier would call getAccessToken method. Now, you have all the query params you returned from step (1) in the bundle.cleanedRequest.querystring . Make sure to return an object that contains access_token key to let zapier know that the oauth2-ish authentication succeeded. Feel free to include that extra information you got in that object so that you can access it in future requests from bundle.authData .
  3. Set oauth2Config.autoRefresh to false because using this authentication flow you may not auto refresh tokens.

To answer your question about unit testing authentication, check out the oauth2 example to see how that can be done https://github.com/zapier/zapier-platform-example-app-oauth2/blob/master/test/basic.js

I personally don't use mock servers. I only use node.js nock library to intercept requests and return whatever response I need in my tests. Hope this helps.


Cheers,

Ikbel


Userlevel 1

@ikbelkirasan Thanks for the very detailed response. I had a hunch I would have to do it based on the oauth flow, I was just hoping I didn’t actually have to implement a real oauth2 provider on my end :)

I’ll let you know how it goes :)