Giter Club home page Giter Club logo

flutter_login_types's Introduction

Flutter ยท Login Types

Create a different ways to login using Flutter Riverpod as state management and dependency injection.


Flutter

  • Clone this project.
  • If you want to rename the bundles for each platform, you must do the steps below.
    • For Android, you must rename the bundle id on app/build.gradle.
    • For iOS in XCode IDE, you select Runner and change the 'Bundle Identifier' text.
  • You must follow the instructions for setting each third login in the steps follow this link.
  • Run project and enjoy ๐Ÿ˜„

Types of Login

User / Password

This scenario recreates of type of conventional login (User / Password) like if you try to connect to a backend or database with the user information and validate if the user and password are corrects.

Passcode

This scenario recreates a login type with a phone number and receives a push notification with the access code which is a number with 4 digits.

Fingerprint / Face Id

This scenario recreates the local auth login with the use of fingerprint (Android, iOS) or face id (iOS).

Third sign in

This scenario recreates the authentication with third providers like Facebook, Google, Apple and Twitter.

Other mechanism

This scenario recreates the authentication using different mechanism like Azure Active Directory B2C and/or Auth0, enabling user/password, third logins, etc.


Setting Third logins

Setting dart-define file

Before to start, you must create a JSON file to set the dart-define variables. Create the JSON file with the name config-keys.json on the project's root.

{
  // Set your key-values here
}
  • You must set the json file in the Dart Define command, setting in the additional run arguments below
    --dart-define-from-file=config-keys.json
    

Setting Google sign in

  • If you want to set the GoogleServices files follow this link
  • If not, you must set the Google client id for Android and iOS, (as reverse mode for iOS) on the Info.plist file. Also, set the Dart Define command setting the additional run arguments below
    {
      "GOOGLE_CLIENT_ID_AND": "<YOUR_GOOGLE_CLIENT_ID_AND>",
      "GOOGLE_CLIENT_ID_IOS": "<YOUR_GOOGLE_CLIENT_ID_IOS>",
      // More keys here...
    }

These values you must get on the Google Console.

Setting Apple sign in

  • You must set the Apple client id and the redirect url as the Dart Define command setting the additional run arguments below
    {
      // keys already exists...
      "APPLE_CLIENT_ID": "<YOUR_APPLE_CLIENT_ID>",
      "APPLE_REDIRECT_URI": "<YOUR_APPLE_REDIRECT_URI>"
      // More keys here...
    }

These values you must get on the Apple Developer Portal. Also, you can follow this link

Setting Facebook sign in

  • You must set the app id and the client token as the Dart Define command setting the additional run arguments below.

    {
      // keys already exists...
      "FACEBOOK_APP_ID": "<YOUR_FACEBOOK_APP_ID>",
      "FACEBOOK_CLIENT_TOKEN": "<YOUR_FACEBOOK_CLIENT_TOKEN>"
      // More keys here...
    }
  • For iOS, you must the app id, the client token and the display name in the ios/Runner/Info.plist file.

These values you must get on the Facebook Developers. Also, you can follow this link for Android and this link for iOS

Setting Twitter sign in

  • You must set the Twitter api key, Twitter api secret and the redirect url in the Dart Define command setting the additional run arguments below

    {
      // keys already exists...
      "TWITTER_API_KEY": "<YOUR_TWITTER_API_KEY>",
      "TWITTER_API_SECRET": "<YOUR_TWITTER_API_SECRET>",
      "TWITTER_REDIRECT_URI": "<YOUR_TWITTER_REDIRECT_URI>"
      // More keys here...
    }
  • For iOS, you must the redirect uri as well in the ios/Runner/Info.plist file.

These values you must get on the Twitter Developer or your apps here. Also, you can follow this link


Setting Auth providers

Setting Azure AD B2C

  • You must set the Azure tenant name, tenant id, policy name, client id and the redirect url in the Dart Define command setting the additional run arguments below

    {
      "AZURE_TENANT_NAME": "<YOUR_AZURE_TENANT_NAME>",
      "AZURE_TENANT_ID": "<YOUR_AZURE_TENANT_ID>",
      "AZURE_POLICY_NAME": "<YOUR_AZURE_POLICY_NAME>",
      "AZURE_CLIENT_ID": "<YOUR_AZURE_CLIENT_ID>",
      "AZURE_REDIRECT_SCHEME": "<YOUR_AZURE_REDIRECT_SCHEME>",
      "AZURE_REDIRECT_PATH": "<YOUR_AZURE_REDIRECT_PATH>"
    }
  • For iOS, you must the redirect scheme as well, in the ios/Runner/Info.plist file.

To get these values, you must follow these links:

Setting Auth0

  • You must set the Auth0 domain and client id in the Dart Define command setting the additional run arguments below.
  • Android only: If you set a custom scheme you have to set a Dart Define key with your custom scheme.
    {
      // keys already exists...
      "AUTH0_DOMAIN": "<YOUR_AUTH0_DOMAIN>",
      "AUTH0_CLIENT_ID": "<YOUR_AUTH0_CLIENT_ID>",
      // Only if you have a custom scheme
      "AUTH0_SCHEME_AND": "<YOUR_AUTH0_SCHEME_AND>"
    }

You can follow this link to guide:


Used packages

Dependencies

Dev dependencies

flutter_login_types's People

Contributors

fabianvarela avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.