{"id":17060516,"url":"https://github.com/e-oj/visa","last_synced_at":"2025-04-05T06:06:27.371Z","repository":{"id":40460410,"uuid":"316932387","full_name":"e-oj/visa","owner":"e-oj","description":"Easy third party authentication (OAuth 2.0) for Flutter apps.","archived":false,"fork":false,"pushed_at":"2024-11-24T19:17:22.000Z","size":512,"stargazers_count":140,"open_issues_count":9,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T05:05:59.375Z","etag":null,"topics":["authentication","flutter","oauth","oauth-providers","oauth2","third-party"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/visa","language":"Dart","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/e-oj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-29T11:06:57.000Z","updated_at":"2024-11-24T19:17:26.000Z","dependencies_parsed_at":"2023-01-21T04:43:46.689Z","dependency_job_id":"5043526f-4e20-467b-8edd-eb8257aaf3c8","html_url":"https://github.com/e-oj/visa","commit_stats":{"total_commits":148,"total_committers":2,"mean_commits":74.0,"dds":0.4054054054054054,"last_synced_commit":"9669284fb413f2df355909f9450b7c04b27b8120"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fvisa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fvisa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fvisa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fvisa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/e-oj","download_url":"https://codeload.github.com/e-oj/visa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294536,"owners_count":20915340,"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":["authentication","flutter","oauth","oauth-providers","oauth2","third-party"],"created_at":"2024-10-14T10:44:18.653Z","updated_at":"2025-04-05T06:06:27.353Z","avatar_url":"https://github.com/e-oj.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# visa\n\nThis is an **OAuth 2.0** package that makes it super easy to add third party authentication to flutter apps. It has support for **FB**, **Google**, **LinkedIn**, **Discord**, **Twitch**, **Github**, and **Spotify**, auth. It also provides support for adding new OAuth providers. You can read this [medium article](https://emmanuelolaojo.medium.com/so-you-want-social-login-oauth-2-0-with-flutter-38f51ab02bba?sk=0da0734ecad0df90d83db18c214d4ca9) for a brief introduction.\n\n### Demo\n\u003cimg src=\"https://drive.google.com/uc?export=view\u0026id=1T_LX4CWsNNyEhWx64nMHtLJUST1papw0\" alt=\"demo\" width=\"550\"\u003e\u003c/img\u003e\n\n## Reference\n- [Getting Started](#getting-started)\n- [Basic Usage](#basic-usage)\n  * [Get a Provider](#step-1---get-a-provider)\n  * [Authenticate](#step-2---authenticate)\n  * [Use AuthData](#step-3---use-authdata)\n  * [Rejoice!](#step-4---rejoice)\n- [Debugging](#debugging)\n\n## Getting Started\n\n### Install visa:\n\n- Open your pubspec.yaml file and add ```visa:``` under dependencies.\n- From the terminal: Run flutter pub get.\n- Add the relevant import statements in the Dart code.\n```dart\n// Possible imports:\nimport 'package:visa/fb.dart';\nimport 'package:visa/google.dart';\nimport 'package:visa/github.dart';\nimport 'package:visa/linkedin.dart';\nimport 'package:visa/discord.dart';\nimport 'package:visa/twitch.dart';\nimport 'package:visa/spotify.dart';\n```\n\n## Basic Usage \n\n### Step 1 - Get a Provider.\nThere are 7 default OAuth providers at the moment:\n```dart\n  FacebookAuth()\n  GoogleAuth({ String personFields })\n  TwitchAuth()\n  DiscordAuth()\n  GithubAuth()\n  LinkedInAuth()\n  SpotifyAuth()\n```\n#### Create a new instance:\n```dart\nFacebookAuth fbAuth = FacebookAuth();\nSimpleAuth visa = fbAuth.visa;\n```\n\n### Step 2 - Authenticate.\nAs shown above, each provider contains a **SimpleAuth** instance called **visa**.\nThe SimpleAuth class has only one public function: **authenticate()**. It takes\nin all the necessary OAuth credentials and returns a **WebView** that's been set \nup for authentication. \n\n#### SimpleAuth.authenticate({ params })\n```dart\nWebView authenticate({\n  bool newSession=false // If true, user has to reenter username and password even if they've logged in before\n  String clientSecret, // Some providers (GitHub for instance) require the OAuth client secret (from developer portal).\n  @required String clientID, // OAuth client ID (from developer portal)\n  @required String redirectUri, // OAuth redirect url (from developer portal) \n  @required String state, // OAuth state string can be whatever you want.\n  @required String scope, // OAuth scope (Check provider's API docs for allowed scopes)\n  @required Function onDone, // Callback function which expects an AuthData object.\n});\n```\n\nHere's how you would use this function:\n```Dart\nimport 'package:visa/auth-data.dart';\nimport 'package:visa/fb.dart';\n\nclass AuthPage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      /// Simply Provide all the necessary credentials\n      body: FacebookAuth().visa.authenticate(\n          clientID: '139732240983759',\n          redirectUri: 'https://www.e-oj.com/oauth',\n          scope: 'public_profile,email',\n          state: 'fbAuth',\n          onDone: done\n      )\n    );\n  }\n}\n```\nIn the sample above, the named parameter **onDone** is a callback which recieves a single arument: an [AuthData](#step-3---use-authdata) object, which contains all the authentication info. We'll look at [AuthData](#step-3---use-authdata) in the next section but here's how you would pass an [AuthData](#step-3---use-authdata) object to the next screen via the **onDone** callback.\n\n```dart\ndone(AuthData authData){\n  print(authData);\n\n  /// You can pass the [AuthData] object to a \n  /// post-authentication screen. It contaions \n  /// all the user and OAuth data collected during\n  /// the authentication process. In this example,\n  /// our post-authentication screen is \"complete-profile\".\n  Navigator.pushReplacementNamed(\n      context, '/complete-profile', arguments: authData\n  );\n}\n```\n\n### Step 3 - Use AuthData.\nThe AuthData object contains all the information collected throughout the authentication process. It contains both user data and authentication metadata. As shown in the code sample above, this object is passed to the \"authenticate\" callback function. Let's have a look at it's structure:\n```dart\nclass AuthData {\n  final String userID; // User's profile id\n  final String firstName; // User's first name\n  final String lastName; // User's last name\n  final String email; // User's email\n  final String profileImgUrl; // User's profile image url\n  final Map\u003cString, dynamic\u003e userJson; // Full returned user json\n  final Map\u003cString, String\u003e response; // Full returned auth response.\n  final String clientID; // OAuth client id\n  final String accessToken; // OAuth access token\n}\n```\nIt provides shortcuts to access **common user properties** (userId, name, email, profile image) as well as the **accessToken**. The complete, returned user json can be accessed through the **userJson** property and you can access the full authentication response (the response in which we recieved an API access token) through the **response** property. \n\n### Step 4 - Rejoice!\nYou have successfully implemented third party auth in your app! you're one step closer to launch. Rejoice!\n\n## Debugging\nTo get debug logs printed to the console, simply set the debug parameter on a provider to ```true```. Like this:\n```dart\nvar fbAuth = FacebookAuth()\nfbAuth.debug = true;\n```\n\n#### Happy OAuthing!\n\n## Reference:\n\n- [Getting Started](#getting-started)\n- [Basic Usage](#basic-usage)\n  * [Get a Provider](#step-1---get-a-provider)\n  * [Authenticate](#step-2---authenticate)\n  * [Use AuthData](#step-3---use-authdata)\n  * [Rejoice!](#step-4---rejoice)\n- [Debugging](#debugging)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-oj%2Fvisa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fe-oj%2Fvisa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-oj%2Fvisa/lists"}