{"id":13403722,"url":"https://github.com/mmazzarolo/react-native-trello-login","last_synced_at":"2025-04-15T13:34:10.387Z","repository":{"id":51390637,"uuid":"148820513","full_name":"mmazzarolo/react-native-trello-login","owner":"mmazzarolo","description":"Use Trello's API token-based authentication in React-Native","archived":false,"fork":false,"pushed_at":"2021-05-12T10:11:19.000Z","size":1384,"stargazers_count":8,"open_issues_count":10,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T10:49:30.483Z","etag":null,"topics":["auth","react","react-native","trello"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmazzarolo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-14T17:22:21.000Z","updated_at":"2022-04-03T23:05:43.000Z","dependencies_parsed_at":"2022-09-11T06:51:22.093Z","dependency_job_id":null,"html_url":"https://github.com/mmazzarolo/react-native-trello-login","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-trello-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-trello-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-trello-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-trello-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmazzarolo","download_url":"https://codeload.github.com/mmazzarolo/react-native-trello-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249080638,"owners_count":21209554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","react","react-native","trello"],"created_at":"2024-07-30T19:01:33.737Z","updated_at":"2025-04-15T13:34:10.105Z","avatar_url":"https://github.com/mmazzarolo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Not actively maintained anymore\n\n# react-native-trello-login\n\n[![npm version](https://badge.fury.io/js/react-native-trello-login.svg)](https://badge.fury.io/js/react-native-trello-login)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nA component that encapsulates Trello's API token-based authentication to grant third-party applications access to the Trello API.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-trello-login/master/.github/login-screenshot-iphonex.png\" height=\"700\" /\u003e\n\u003c/p\u003e\n\n## Setup\n\nThis library is available on npm, install it with: `npm install --save react-native-trello-login` or `yarn add react-native-trello-login`.\n\n## Usage\n\n### 1. Import `react-native-trello-login`\n\n```javascript\nimport TrelloLogin from \"react-native-trello-login\";\n```\n\n### 2. Define your Trello API key\n\nTo begin the authentication process, you need an API key. Every Trello user is given an API key.\nYou can retrieve your API key by logging into Trello and visiting [https://trello.com/app-key/](https://trello.com/app-key/).  \nBecause the API key is tied to the user, it is often a good idea to create a Trello user specifically for building a single application or integration. This ensures that a third-party's integration is disassociated from a third-party integration's developer's Trello account.\nIt's also suggested to define the API key in a separate file or [in an environment variable](https://github.com/zetachang/react-native-dotenv).\n\n```javascript\nconst TRELLO_API_KEY = \"YOUR_API_KEY_HERE\";\n```\n\n### 3. Show the Trello authentication screen\n\nThe imported `TrelloLogin` component is just a React-Native WebView that will take care of showing and handling the Trello auth process.\n\n```javascript\nexport default class TrelloLoginExample extends React.Component {\n  handleLoginSuccess = trelloAuthToken =\u003e {\n    // The user authenticated successfully.\n    // From now on you'll be able to use the Trello APIs using `trelloAuthToken`\n  };\n\n  handleLoginFailure = message =\u003e {\n    // Handle the authentication failure (maybe by showing an alert?)\n  };\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTrelloLogin\n          applicationName=\"React Native Trello Login Example\"\n          onLoginSuccess={this.handleLoginSuccess}\n          onLoginFailure={this.handleLoginFailure}\n          trelloApiKey={TRELLO_API_KEY}\n          style={styles.webview}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n## A complete example\n\nSee the `/example` folder for a complete example (login + logout).\n\n## Available props\n\n| Name            | Type   | Default      | Description                                                                 |\n| --------------- | ------ | ------------ | --------------------------------------------------------------------------- |\n| applicationName | string | **REQUIRED** | The application name shown to the user in the login process                 |\n| debugEnabled    | bool   | false        | When true, shows a few useful `console.debug` logs during the login process |\n| onLoginFailure  | func   | **REQUIRED** | Callback invoked on a failed login (callback parameter: error message)      |\n| onLoginSuccess  | func   | **REQUIRED** | Callback invoked on a successful login (callback parameter: auth token)     |\n| trelloApiKey    | string | **REQUIRED** | The [Trello API key](https://trello.com/app-key/)                           |\n| style           | any    | null         | Style applied to the Trello login WebView                                   |\n\nPlease notice that you can also provide [any WebView prop](https://facebook.github.io/react-native/docs/webview).\n\n## Useful resources\n\n- [Trello auth docs](https://developers.trello.com/page/authorization)\n- [Trello API docs](https://developers.trello.com/v1.0/reference#introduction)\n- [Your Trello API key](https://trello.com/app-key/)\n- [React-Native WebView docs](https://facebook.github.io/react-native/docs/webview)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Freact-native-trello-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmazzarolo%2Freact-native-trello-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Freact-native-trello-login/lists"}