Login Component

Logging in using Teamwork.com just got easier! You can now use our new public component to allow users to login via their Teamwork.com account to your app or service. This works hand in hand with our app login flow. As a Teamwork.com 3rd party developer, you can now avail of this new feature!

In order to use this:

After you have created an app, and you are ready to build the sign in process, you can navigate to our GitHub repository. You’ll see here there is two approaches:

  • Using it as package from NPM

  • Loading it from our CDN

Whichever method you go with, you need to add the Teamwork.com button to your template or view by adding:

<teamwork-login-button
redirectURI="https://www.example.com/redirect_uri_from_developer_portal"
clientID="your_client_id"
state="optional_state_parameter"
color="slate"
size="large"
borders="default"/>

Parameter Options

The parameters you will pass in, you’ll find in the Developer Portal app screen. The rest are design parameters for the button itself.

  • redirectURI – Must be entered when creating an app in the Developer Portal. What you pass in here must match the redirect URI of your app

  • clientID – Is generated in the Developer Portal. What you pass in here must match the clientID of your app.

  • iconOnly – This is an optional attribute, if present, the button will only display the Teamwork icon, no text.

  • state – Optional state attribute, its contents will be passed in a state query parameter alongside the token to your redirect URI.

  • color – The colour you want the button to be.
    Options: slate, pink, indigo, pink. Default: white.

  • size – The size you want the button to be.
    Options: large,medium, small. Default: medium.

  • borders – The border style of the button.
    Options: default, rounded, square. Default: default.

Let’s take an example:

Take this button below:

<teamwork-login-button
redirectURI="https://developer.teamwork.com"
clientID="clientId123456"
state="appstate"
color="white"
size="large"
borders="default"/>

Which renders like this:

Using this button component will kick off the login process as it redirects the user to the launchpad login page. Continue the login process by following our app login flow.

Feedback

If you have any feedback or suggestions, feel free to contact us at?api@teamwork.com.