Two-factor authentication (also called 2FA) adds an extra layer of security to your Zapier account by requiring access to your phone or mobile device, in addition to your password. To add Session Auth to a Zapier integration, open your apps Authentication page in Zapier visual builder then select Session Auth in the drop-down. This lets you add headers, query params, or whatever is needed to be within all outbound requests. Zapier will then make sure this field is included in the response data, and you can reference it in subsequent API calls. Inside the directory, youll see a few files. Click Save & Continue when finished to save your authentication settings. Youll see a new Connect Account item in your New Recipe trigger. Zapier includes your apps name in the connection label by default, followed by the version number, then any text you include in the connection label. Essentially, we export some metadata plus our listRecipes function and a sample. You can also change your emergency phone number by following the directions above. Zapier automatically creates a form for Basic Authall you need to add is a test API call to ensure those credentials work. Session auth does not include any default input fields. Then, test your authentication, adding a real account to ensure Zapier can successfully connect to your app and use your test API call. (Optional) Set up emergency phone verification, 12. If you switch back to Form mode, though, Zapier will not convert your code changes to the form mode, nor will any subsequent changes in form mode be added to your code. This will allow you to log into your Zapier account. Copy that data from your app, then in Step 3 of your Zapier OAuth configuration, paste those items in their respective fields. Every input field requires a Key, the name your API uses to reference this field. If you need to use data received from the auth API responsesuch as team account names, domains, or subdomainsyou can add a Computed Field by selecting the Field Type at the top of the form. The Zapier platform does not currently support other grant types. Selecting it, youll see the New Recipe trigger. API Key authentication lets apps verify users account with an API key that is passed along with every API call. You can also add details to the account. In this tutorial, well walk you through the process of building, testing, and pushing an example app to Zapier. If your API supports automated token refresh, add your APIs Refresh Token Request in the following field, and check the Automatically Refresh Token box. Alternately, click Switch to Code Mode to replace the form data with custom JavaScript code for your API call and response parsing. There, add the following details: Be sure to add one field for every piece of data users need to enter to authenticate their account with your API. Session authentication shares elements of Basic authenticationwhere Zapier requests a username and password, then uses them directly to authenticate each API calland OAuth v2where Zapier redirects users to the apps site to allow access, then exchanges credentials for a token it uses to authenticate subsequent API calls. Need help? OAuth v2 authentication is the easiest authentication scheme for users, as it matches the login process they expect from most modern apps. beforeRequest is a list of functions that are called before every HTTP request that uses z.request or the default perform function. Next, add your apps Access Token Request URL, typically with a POST call and the default settings Zapier uses if your app uses a standard OAuth configuration. Remember that, as part of the metadata, we defined a display property with a label and help text. The value appears as :censored:6:b1af149262:, which is intentional. Finally, add a connection label to your Zapier integration. To use a new app or device for two-factor authentication, first disable two-factor authentication following the instructions above and then re-enable it following these instructions. You can now use this GitHub account to test triggers and actions as you build them into your integration. We have to add it in two places: Since we are developing locally, lets tweak the test to verify everything still works. Tell us about your problem and well connect you with the right resource or contact support. You can have many versions of an app, which simplifies making breaking changes and testing in the future. API Key authentication works similarly to Zapiers Basic Auth in that Zapier passes the credentials with every API call. When youve added the needed forms, click Continue to add a test API call and continue setting up your apps authentication. The name chosen is illustrative, it can be whatever the API you are integrating with requires. Finally add a connection label to uniquely identify each account users add from your app to Zapier. The listReceipes function receives two arguments, a z object and a bundle object. Need help? In the above snippet, we define the two required properties of authentication: With that setup, we now need to make sure that our API key is included in all the requests our app makes. Congrats, youve completed the tutorial! For example, logging of HTTP calls and better handling of JSON parsing failures. Enter the same key name that your API uses. Add it yourselfhere, and in subsequent Trigger and Action step API callsin your API call settings. To add input fields, click the Add Fields button, then select the type of field you need. Here, though, you need to build the input form where users add their API key and any other optional information your API requires, such as their account name, site URL, and other identifying data. Zapier automatically includes the API key and any additional input fields you added to your input form in the URL Params. Once completed, click Continue to save your form and setup OAuth authentication. Alternatively, you could put it in a query parameter instead of a header, and/or encode it first. It's very important that you save your 10 recovery codes and put them in a safe place separate from your mobile device. You should be able to run the test with zapier test and see it pass: For this example, well stick to a single test, but you can see what multiple tests look like in our this example. To generate new recovery codes: A new set of 10 recovery codes will be generated for you. Zapier then makes a test call to verify the credentials, and stores them to use with every subsequent API call Zapier makes to your app on behalf of the user. This means that even if someone stole your password, they would be unable to access your account without your mobile device. Your integration defines how Zapiers platform authenticates with the API and what data needs to be collected from users to allow access to their accounts. Typically, enter the URL in the field and leave the default settings. Zapier will automatically include the Client ID and Secret in authentication API calls, but if you need to reference them in your Zapier API calls or custom code, use the following codes: Now its time to configure how Zapier sends users to your API to allow access to their account in your app, and how Zapier gets the credentials it needs for future API calls. You can also use Session auth if your API uses a variant of OAuth that the Zapier platform doesnt explicitly support. When asked for your Two-Factor Authentication code, click, Enter one of your unused recovery codes and click. Once you have the proper version of Node.js, install the Zapier CLI tool. You can include: Learn more in our Connection Label documentation. In a Zapier integration using API Key authentication, Zapier includes the API keyoptionally along with any other data your API needsevery time a Zap step runs. To make our helper function take effect, we need to register it on our app. For our app, we are going to set it up to include an API Key in a header. To do that, click the Switch to Code Mode toggle. Learn more in our Computed Fields docs. All you need to add is a test API call where Zapier can verify that the credentials work, and optionally a connection label to help users identify the account. If you've lost your backup codes, but you still have your 2FA device, you can view your recovery codes by doing the following: Your 10 recovery codes will now be displayed in the Save Your Recovery Codes section. for more details. In addition to the username and password on the pre-built form, you can add more fields if your API documentation requires it. Replace the example email address with the user you want to invite. With that, weve successfully added authentication to our app! Additionally, if you switch back to code mode again later, Zapier will not add any changes from the API call form to your code. Once youve added your input fields, Zapier lists each input field with its label, key, type, and required status on your authentication settings. As you click through, youll see our input field style appear, which you can fill out. Zapier will automatically include the access token in subsequent API requests, but if you need to manually add it, the access token is stored in the authData bundle and can be referenced with {{bundle.authData.access_token}} or {{bundle.authData.accessToken}}, depending on how your APIs response references the access token. Before we go any further, we need to install the dependencies for our app: Right next to package.json should be index.js, which is the entry point to your app. You will need the following to set up Session Auth: The first thing to add for Session auth is an input form. Start by adding a form where users will enter their API key and other authentication details when connecting their app account to Zapier. If you need a specialized API call or response parsing on this or other API call steps, click Switch to Code Mode. A classic way to do that with Zapier is to provide an input field a user can fill out. 2. Add the field key, using the same field key as your APIs response, and leave the remaining field details blank. It works much like cookie-based authentication in your browser, only here the cookie is an auth token stored by Zapier. From the Zapier CLI, run: Good work, weve built a trigger locally and pushed it to Zapier. Click the Switch to Code Mode toggle to enable it. We highly recommend saving your recovery codes in a safe place separate from your authentication device. In Zapier integrations with OAuth v2, the user part of authentication typically takes place in full on the apps own site, helping users easily connect accounts without sharing account credentials or looking up API keys. Click Connect an Account, and enter your GitHub username and password or personal access token. Changing your two-factor authentication device or app, re-enable it following these instructions. If you need to use data received from the auth API responsesuch as team account names, domains, or subdomainsyou can add a Computed Field by selecting the Field Type at the top of the form. From Zapiers visual builder, copy the OAuth Redirect URL, similar to the one shown above, and add it to your applications integration settings. Zapier stores that authentication token for use with subsequent API calls. Many Zapier integrations use OAuth2 authentication to connect user accounts, including Zapiers built-in GitHub integration. Enter the same key name that your API uses. Zapier then needs a way to test the API key and other input field data users enter and ensure it enables a successful API call. For input fields, select the default Field type, then add: Add the fields in the order users would expect to see them. Once you finish setting up the step and test it, Zapier will run the listRecipes function associated with the trigger, which will make the API request and return the result to Zapier. For Session auth, Zapier gathers username, password, and other login details to use in an API call. Youll also need to do this to modify the response if your token exchange request doesnt return the token or Computed Fields data at the top level. The first thing to set up is authentication. In the dialog box, enter a verification code from your authentication app. Click the field to edit it, or click the gear icon and select Delete to remove a field. We highly recommend saving your recovery codes in a safe place separate from your 2FA device. Then fill in the optional fields, as appropriate, especially the Label: Note: The input field designer also includes an option for computed fields; those are not applicable to API key login and are only used with OAuth v2 and Session auth. You can typically copy this URL from your application or integration settings where you copied the client ID and secret previously, or from your apps API page. This will help Zapier stay connected to your users accounts and enable Zaps to run in the background without interrupting users as long as possible. If you lose access to your Zapier account, our support team will not be able to restore access without your recovery codes. If your OAuth 2 implementation supports refresh tokens, you can optionally configure a Refresh Token request. Zapier then needs a Test API calltypically to a /user or /me endpoint that returns details about the user and needs no additional configurationto test account authentication and ensure the access token works. Which OAuth 2 Flow Type Does Zapier Support? You can see from the detailed log that the request included our auth header. To get started, first make sure that your dev environment meets the requirements for running the the platform. For now, we just need a single version pushed. Zapier does not log authentication credentials in plain text. Check our Authentication Testing docs for more details, common errors you may encounter, and how to resolve those. Tell us about your problem and well connect you with the right resource or contact support. How to Use Dynamic Dropdowns in Zapier CLI, How to Add Logo and Branding to CLI Integration, How to Manage Versions of your Zapier Integration, How to Build and Publish a Zapier Integration, Zapier Integration Branding and Design Guidelines. # Zipping project and dependencies - done! The first time you click the toggle, Zapier will convert the data from your API call form to JavaScript. Tell us about your problem and well connect you with the right resource or contact support. Whenever a new account is authenticated with Zapier, Zapier adds a Connection Label so users can identify accounts and add multiple accounts if desired. Zapier supports a wide range of authentication schemesselect the best one for your app. Need help? If you lose both your mobile device and your recovery codes, you will permanently lose access to your Zapier account. The first thing we need to do is define the authentication section on the app. Tell us about your problem and well connect you with the right resource or contact support. In a Zapier integration with Basic Auth, Zapier includes the name and password of the user in the API request bundle every time Zapier polls an API endpoint for new data or posts new data to an API endpoint. If you want to share Zapier with other people on your team, it's recommended to use .css-1cn5abi-A[class][class][class][class][class]{font-weight:700;color:var(--zds-colors-blue-jeans,#3d4592);-webkit-text-decoration:underline;text-decoration:underline;}.css-1cn5abi-A[class][class][class][class][class]:hover,.css-1cn5abi-A[class][class][class][class][class]:active{color:var(--zds-colors-night,#2b2358);}.css-u260bs-ExternalLinkContent--spanCss[class][class][class][class][class]{color:var(--zds-colors-blue-jeans,#3d4592);font-weight:700;}.css-u260bs-ExternalLinkContent--spanCss[class][class][class][class][class]:hover,.css-u260bs-ExternalLinkContent--spanCss[class][class][class][class][class]:focus{color:var(--zds-colors-night,#2b2358);}.css-u260bs-ExternalLinkContent--spanCss[class][class][class][class][class]::after{margin-left:5px;content:'';display:inline-block;width:13px;height:13px;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuODc1IDEwLjg3NUgyLjEyNVYyLjEyNUg2LjVWMC44NzVIMi4xMjVDMS40MzEyNSAwLjg3NSAwLjg3NSAxLjQzNzUgMC44NzUgMi4xMjVWMTAuODc1QzAuODc1IDExLjU2MjUgMS40MzEyNSAxMi4xMjUgMi4xMjUgMTIuMTI1SDEwLjg3NUMxMS41NjI1IDEyLjEyNSAxMi4xMjUgMTEuNTYyNSAxMi4xMjUgMTAuODc1VjYuNUgxMC44NzVWMTAuODc1Wk03Ljc1IDAuODc1VjIuMTI1SDkuOTkzNzVMMy44NSA4LjI2ODc1TDQuNzMxMjUgOS4xNUwxMC44NzUgMy4wMDYyNVY1LjI1SDEyLjEyNVYwLjg3NUg3Ljc1WiIgLz48L3N2Zz4=) no-repeat 50% 50%;mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuODc1IDEwLjg3NUgyLjEyNVYyLjEyNUg2LjVWMC44NzVIMi4xMjVDMS40MzEyNSAwLjg3NSAwLjg3NSAxLjQzNzUgMC44NzUgMi4xMjVWMTAuODc1QzAuODc1IDExLjU2MjUgMS40MzEyNSAxMi4xMjUgMi4xMjUgMTIuMTI1SDEwLjg3NUMxMS41NjI1IDEyLjEyNSAxMi4xMjUgMTEuNTYyNSAxMi4xMjUgMTAuODc1VjYuNUgxMC44NzVWMTAuODc1Wk03Ljc1IDAuODc1VjIuMTI1SDkuOTkzNzVMMy44NSA4LjI2ODc1TDQuNzMxMjUgOS4xNUwxMC44NzUgMy4wMDYyNVY1LjI1SDEyLjEyNVYwLjg3NUg3Ljc1WiIgLz48L3N2Zz4=) no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:var(--zds-colors-blue-jeans,#3d4592);}Zapier for Teams. Zapier implements the Authorization Code grant type when you choose OAuth v2. At this point, weve come full circle on the trigger definition from earlier. You see that it handles the API work, making the HTTP request and returning a promise that will eventually yield a result. You cannot reorder fields, though you can delete fields and add them again if needed. Welcome to the Zapier Platform! Add the token exchange request URL in the field, select the correct HTTP method, and Zapier will automatically include the data from the input fields in the API request body. To add OAuth authentication to a Zapier integration, open your apps Authentication page in Zapiers visual builder, then select OAuth v2 from the authentication scheme drop-down. Click Save & Continue when finished to save your authentication settings. There is also an index.js file and a test directory (more on those later). Zapier will show an error if a field marked as computed is not included in the response data. Tell us about your problem, and well find you a solution or you can email support. (If you've previously used any of your recovery codes, you may see fewer than 10 displayed.). For the test API call, enter an API endpoint under the Test header where Zapier can test users credentials for your app, and set the correct call method (typically GET). Youll want to keep that file safe and not check it into source control. Optionally, if you wish to limit Zapiers scope to let it only access specific data from your app, you can add OAuth scopes in the following field with a comma- or space-separated list. Basic Authentication lets you connect APIs to Zapier that authenticate users with a username and password. # Preparing to build and upload your app. If you havent already, in a different tab or window open your apps application, integration, or API settings, and add a new application for your OAuth integration with Zapier. When a user adds an app account to Zapier with Session auth, they first fill out an input form with any authentication credentials that apps API requires. If you need further customization of your login flow or need additional data from users, API key authentication may be what your API requires. You can include: Learn more in our Connection Label documentation. These recovery codes were generated when you set up two-factor authentication. Alternately, since API key authentication allows you to create a custom input form, you can use it to customize username and password-based logins that dont fit Zapiers default Basic auth scheme. To do so, we need to take our working local app and push it to Zapier. Now that your CLI is installed - youll need to identify yourself via the CLI. You can find this URL in your applications API documentation. As soon as you add the account, Zapier will run our apps authentication.test function to confirm the credentials are valid. Read the Zapier blog for tips on productivity, automation, and growing your business. Or run the command without an email address to get a URL you can put in your help pages or other messages to your users. Go back to your Zap at https://zapier.com. You can additionally include: Learn more in our Connection Label documentation. They can then enter their account credentials confidently since theyre entering them on that apps own siteand often, users will not need to enter credentials since theyre already logged in. When youve added the needed fields, click Continue to Configure a Test Request & Connection Label and continue setting up your apps authentication. Well explain later how Zapier uses this metadata and exposes it to the end user. Learn more in our Computed Fields docs. If your integration requires OAuth v1 authentication, use the Zapier CLI to build your integration instead. With it, you can validate and test apps locally, push apps so they are available on Zapier, and view logs for debugging. Finally add a connection label to help users identify each account that they add from your app to Zapier. If you have at least one trigger or action, now would be a fine time to share your app with some of your users. Then, test your authentication, adding a real account to ensure Zapier can successfully connect to your app, exchange user credentials for an access or session token, and use your test API call. If you need a custom API call, you can switch to code mode and write custom JavaScript code to handle your test API call and the response parsing, if needed. For that, in step two, add an API call to your API that requires no configuration, typically a /user or /me call. Add the URL for the API call, and set the call type. Then fill in the optional fields, as appropriate, especially the Label: Note: The input field designer also includes an option for computed fields; those are not applicable to Basic Auth login and are only used with OAuth v2 and Session auth. To begin building an app, use the init command to setup the needed structure. For different types of authentication, see these example apps: For this app, our API Key will go in the header. Save each field after adding it, then click Continue when every field your API needs has been added. Click Save & Continue when finished to save your authentication settings. For each field that you need, click the Add Fields button and fill in the details for your field. If your API requires any custom details in the API call, click the Show Options link in the lower right, then add URL params or HTTP headers if needed. package.json is a typical requirements file of any Node.js application. Only using a password to protect your account is still susceptible to security threats because it only represents a single piece of information someone needs to acquire. Enter it into the. Once youve added your input fields, Zapier lists each input field with its label, key, type, and required status on your authentication settings. Once youve enabled two-factor authentication on your account, the next time you log in to Zapier youll be prompted to enter a verification code from your mobile app. Enter your 2FA authentication code from your authentication app when asked. Check your API documentation for what fields are required, including user or account names, domains, and more. Zapier supports most popular authentication schemes, including basic auth with username and password, API key auth, digest, session, and OAuth v2. We will configure it to read data from a mocked API (in the future - your real app will use a real API, of course :-): Note: The triggers folder is simply a convention - we recommend it. When to use Basic Auth: Use Basic Auth if your API requires a username and password or other basic fields, needs no special configuration, and specifically if your API leverages HTTP Basic Authentication. Zapier always includes the apps name in each account label. Above we define a helper function, addApiKeyToHeader, that puts the user-provided API key in a request header called MY-AUTH-HEADER. Then, test your authentication, adding a real account to ensure Zapier can successfully connect to your app and use your test API call. Also, recipe.js is just an example name of a model - maybe youll eventually make a contact.js, lead.js or order.js. Read the docs for more info. If you need more customization, you can write custom JavaScript code to call your API and parse the output data. Click the Authentication tab in Zapier visual builder, then select Basic Auth from the menu. Video courses designed to help you become a better Zapier user, whether youre a beginner or more experienced. If you need to change that, click the Show Options button and add any additional call details needed. This ensures you'll still have access to your recovery codes if you lose your 2FA device. To regain access to your account, follow these steps: If you lose your 2FA device and your recovery codes, you will be permanently locked out of your Zapier account. How to Use Dynamic Dropdowns in Zapier CLI, How to Add Logo and Branding to CLI Integration, How to Manage Versions of your Zapier Integration, How to Build and Publish a Zapier Integration, Zapier Integration Branding and Design Guidelines, How to Add Basic Auth to a Zapier Integration, Add More Fields to a Basic Auth Input Form, Plain text that will be included after your apps full name, The username that users enter in the Zapier authentication form when adding your appenter, Output fields from your apps authentication test API call, referenced with. If you want to use OAuth or another authentication scheme, check our auth docs for more details and use them instead of the steps below. Zapier supports a number of different authentication schemes. Its been fun, but we want our app on Zapier.com so we can use it with the thousands of other integrations! # Build and upload complete! You should see it in your Zapier editor at https://zapier.com/app/editor now! Connect with other Zapier users and industry professionals to get help crafting the perfect workflow. Zapier will show an error if a field marked as computed is not included in the response data. See How does Code Mode work? Note about Z Object: While it is possible to accomplish the same tasks using alternate Node.js libraries, its preferable to use the z object as there are features built into these utilities that augment the Zapier experience. Zapier then sends a request to the APIs token exchange endpoint with those credentials, and the API responds with an authentication token. Finally, add a connection label to help users identify each account that they add from your app to Zapier. zapier invite email@example.com. In our case, every HTTP request will now have the API key added in a header. Then test the authentication. If your API expects the data in the URL params or HTTP headers instead, or requires additional data, click Show Options and add the details your API call needs. Now your CLI is installed and ready to go! How to Use Dynamic Dropdowns in Zapier CLI, How to Add Logo and Branding to CLI Integration, How to Manage Versions of your Zapier Integration, How to Build and Publish a Zapier Integration, Zapier Integration Branding and Design Guidelines, How to Add Session Auth to a Zapier Integration, replace the form data with custom JavaScript code, An input form, built inside Zapier, with fields for each data item your API needs for authentication, A Token Exchange Endpoint URL, where Zapier will send user credentials from the input form to your API and receive an auth token in the response, A Test API endpoint that Zapier can call to ensure the auth token works and allows access to the users account, A Connection Label to uniquely identify user accounts, Plain text that will be included in every account connection, Any input field from your authentication form, or from your Token Exchange API callenter, Output fields from your apps authentication test API call, referenced with. How to Add OAuth v2 to a Zapier Integration, Add Access Token Request and Refresh Token Request URLs, An input form (optional) to gather data from users, such as account team name or site URL for self-hosted apps, An OAuth application configured in your own apps settings, where youll add Zapiers OAuth Redirect URL, A Client ID (may be called Customer or API Key) and Client Secret (may be called Customer or API secret) from your app, An Authorization URL on your apps site where users will log in with their account credentials, A list of API scope(s) (optional) to restrict what Zapier can access, An Access Token Request URL where Zapier exchanges the request token for an access token, A Refresh Token Request URL (optional) where Zapier can refresh the access token if it expires, along with an option to have Zapier automatically refresh credentials, A Test API endpoint where Zapier can make an API call to ensure your user credentials work, A Connection Label to uniquely identify users accounts, Plain text that will be included in every account connection, Any input field from your authentication formenter, Output fields from your apps authentication test API call, referenced with. For GitHub, add {{bundle.authData.username}} to the Connection Label to include users GitHub username along with the app name that Zapier automatically includes. This will show a form to users with the fields youve added before redirecting them to your authorization URL. Lets start by adding a trigger. Zapier will then make sure this field is included in the response data, and you can reference it in subsequent API calls. Click Save & Continue to save your progress so far. Then, test your authentication, adding a real account to ensure Zapier can successfully connect to your app and use your test API call.