title: How to make a basic http auth ( Login and Register ) and store the token
body: <p>how are you ?</p>
  <p>i have laravel backend with passport auth and now i want to link it with my mobile app in flutter</p>
  <p>i want to make the auth but i'm new in flutter and i don't know how to start to do this</p>
  <p>first i make my models</p>
  <p>this is my first model login.dart</p>
  <pre><code>class Login {
    final String login;
    final String password;
  
    Login (this.login,this.password);
  }
  </code></pre>
  <p>my second model is register.dart</p>
  <pre><code>class Register {
    final String email;
    final String name;
    final String mobile;
    final String password;
  
    Register(
      this.email,
      this.name,
      this.mobile,
      this.password,
    );
  }
  </code></pre>
  <p>and this is User model</p>
  <pre><code>class User {
    final int id ;
    final int active ;
    final int confirmed ;
    final String mobile  ;
    final String name ;
    final String email ;
    final String confirmation_code ;
  
   User(this.id,this.active,this.confirmed,this.mobile,this.name,this.email,this.confirmation_code);
  
  
  }
  </code></pre>
  <p>this is my Auth Response Model</p>
  <pre><code>import './User.dart';
  
  class AuthResponse {
    final String token;
    final User user;
  
    AuthResponse(
      this.user, this.token
    );
  
  
  }
  </code></pre>
  <p>but now i don't know how to make the auth and link it with these models so can any one help please</p>
  <p>thanks</p>
  <hr />
  <p>New codes</p>
  <p>my login page code</p>
  <pre><code>import 'dart:async';
  
  import 'package:flutter/material.dart';
  
  import 'package:http/http.dart' as http;
  import 'package:shared_preferences/shared_preferences.dart';
  
  import 'package:flutter/services.dart';
  
  import '../../common/apifunctions/requestLoginAPI.dart';
  
  
  import 'package:gradient_widgets/gradient_widgets.dart';
  
  
  
  class UserLoginPage extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _UserLoginPage();
    }
  }
  
  class _UserLoginPage extends State&lt;UserLoginPage&gt; {
    final TextEditingController _mobileController = TextEditingController();
    final TextEditingController _passwordController = TextEditingController();
  
  
  
    @override
    void initState() {
      super.initState();
      _saveCurrentRoute('/UserLogin');
    }
  
    _saveCurrentRoute(String lastRoute) async {
      SharedPreferences preferences = await SharedPreferences.getInstance();
      await preferences.setString('LastScreenRoute', lastRoute);
    }
  
    void _gloginButton() {
      Navigator.pushReplacementNamed(context, '/Home');
    }
  
    void _registerButton() {
      Navigator.pushNamed(context, '/UserRegister');
    }
  
    @override
    Widget build(BuildContext context) {
      return WillPopScope(
          onWillPop: () {
            if (Navigator.canPop(context)) {
              Navigator.of(context).pushNamedAndRemoveUntil(
                  '/Home', (Route&lt;dynamic&gt; route) =&gt; false);
            } else {
              Navigator.of(context).pushReplacementNamed('/Home');
            }
          },
          child: Scaffold(
            body: Column(
              children: &lt;Widget&gt;[
                Image.asset('assets/img/LRUI.png'),
                Form(
                  child: Container(
                    //padding: EdgeInsets.only(top: 100.0),
                    margin: EdgeInsets.all(35.0),
                    child: Center(
                      child: Center(
                        child: SingleChildScrollView(
                          child: Column(
                            children: &lt;Widget&gt;[
                              SizedBox(
                                height: 99.0,
                              ),
                              TextFormField(
                                controller: _mobileController,
                                decoration: InputDecoration(
                                  labelText: 'رقم الجوال',
                                  hintText: &quot;رقم الجوال يجب أن يكون عشر ارقام&quot;,
                                ),
                                style: TextStyle(
                                  fontSize: 18.0,
                                  color: Colors.grey,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              SizedBox(height: 11.0),
                              TextFormField(
                                controller: _passwordController,
                                decoration: InputDecoration(
                                  labelText: 'الرقم السري',
                                ),
                                obscureText: true,
                                style: TextStyle(
                                  fontSize: 18.0,
                                  color: Colors.grey,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              SizedBox(
                                height: 40.0,
                              ),
                              GradientButton(
                                gradient: const LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomCenter,
                                  colors: const &lt;Color&gt;[
                                    Color(0xff4caf4e),
                                    Color(0xff71c071),
                                  ],
                                ),
                                callback: () {
                                  SystemChannels.textInput
                                      .invokeMethod('TextInput.hide');
                                  requestLoginAPI(context, _mobileController.text,
                                      _passwordController.text);
                                },
                                textStyle: TextStyle(
                                    color: Colors.white, fontSize: 16.0),
                                shapeRadius: BorderRadius.circular(10.0),
                                child: Text(
                                  &quot;دخول&quot;,
                                ),
                                increaseHeightBy: 20.0,
                                increaseWidthBy: 140.0,
                              ),
                              SizedBox(
                                height: 35.0,
                              ),
                              FlatButton(
                                child: Text('دخول كضيف'),
                                onPressed: _gloginButton,
                              ),
                              FlatButton(
                                child: Text('تسجيل حساب جديد'),
                                onPressed: _registerButton,
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ));
    }
  }
  </code></pre>
  <p>and this is my my Api function code for request login</p>
  <pre><code>import 'dart:async';
  
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import '../functions/ saveCurrentLogin.dart';
  import '../functions/showDialog.dart';
  import 'dart:convert';
  
  import '../../Models/Login.dart';
  import '../../Models/User.dart';
  import '../../Models/AuthResponse.dart';
  
  Future&lt;Login&gt; requestLoginAPI(BuildContext context, String login, String password) async {
    final url = &quot;http://188.166.172.146/Blooming/public/api/login&quot;;
  
    Map&lt;String, String&gt; body = {
      'login': login,
      'password': password,
    };
  
    final response = await http.post(
      url,
      body: body,
    );
  
    if (response.statusCode == 200) {
      final responseJson = json.decode(response.body);
      var token = new AuthResponse.fromJson(responseJson);
  
      saveCurrentLogin(responseJson);
      Navigator.of(context).pushReplacementNamed('/About');
        
  
  
  
      return Login.fromJson(responseJson);
    } else {
      final responseJson = json.decode(response.body);
  
      saveCurrentLogin(responseJson);
      showDialogSingleButton(context, &quot;خطأ&quot;, &quot;تأكد من معلومات الدخول&quot;, &quot;موافق&quot;);
  
      return null;
    }
  }
  </code></pre>
  <p>this is my save current login function code</p>
  <pre><code>import 'package:shared_preferences/shared_preferences.dart';
  
  
  import '../../Models/AuthResponse.dart';
  import '../../Models/User.dart';
  
  saveCurrentLogin(Map responseJson) async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
  
  
    var token = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? AuthResponse.fromJson(responseJson).token : &quot;&quot;;
  
    var id = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).id : 0;
    var name = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).name : &quot;&quot;;
    var email = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).email : &quot;&quot;;
    var mobile = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).mobile : &quot;&quot;;
    var active = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).active : 0;
    var confirmation_code = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).confirmation_code : &quot;&quot;;
    var confirmed = (responseJson != null &amp;&amp; !responseJson.isEmpty) ? User.fromJson(responseJson).confirmed : 0;
  
    await preferences.setString('token', (token != null &amp;&amp; token.length &gt; 0) ? token : &quot;&quot;);
  
    await preferences.setInt('id', (id != null &amp;&amp; id &gt; 0) ? id : 0);
    await preferences.setString('name', (name != null &amp;&amp; name.length &gt; 0) ? name : &quot;&quot;); 
    await preferences.setString('email', (email != null &amp;&amp; email.length &gt; 0) ? email : &quot;&quot;); 
    await preferences.setString('mobile', (mobile != null &amp;&amp; mobile.length &gt; 0) ? mobile : &quot;&quot;); 
    await preferences.setInt('active', (active != null &amp;&amp; active &gt; 0) ? active : 0);
    await preferences.setString('confirmation_code', (confirmation_code != null &amp;&amp; confirmation_code.length &gt; 0) ? confirmation_code : &quot;&quot;); 
    await preferences.setInt('confirmed', (confirmed != null &amp;&amp; confirmed &gt; 0) ? confirmed : 0);
    
  
  }
  </code></pre>
  <p>this is get token function code</p>
  <pre><code>import 'package:shared_preferences/shared_preferences.dart';
  
  getToken() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
  
    String getToken = await preferences.getString(&quot;token&quot;);
    return getToken;
  }
  </code></pre>
  <p>this is the new login model</p>
  <pre><code>class Login {
    final String login;
    final String password;
  
  
    Login(this.login, this.password);
  
    Login.fromJson(Map&lt;String, dynamic&gt; json)
        : login = json['login'],
          password = json['password'];
  
  
  }
  </code></pre>
  <p>this is auth response model</p>
  <pre><code>import './User.dart';
  
  class AuthResponse {
    final String token;
    User user;
  
    AuthResponse({
      this.token,
      this.user,
    });
  
  factory AuthResponse.fromJson(Map&lt;String, dynamic&gt; parsedJson){
    return AuthResponse(
      token: parsedJson['token'],
      user: User.fromJson(parsedJson['user'])
    );
  }
    
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
          'token': token,
          'user':user,
        };
  }
  </code></pre>
  <p>this is my User model</p>
  <pre><code>class User {
    final int id;
    final String name;
    final String email;
    final String mobile;
    final int active;
    final String confirmation_code;
    final int confirmed;
  
    User({
      this.id,
      this.name,
      this.email,
      this.mobile,
      this.active,
      this.confirmation_code,
      this.confirmed,
    });
  
    factory User.fromJson(Map&lt;String, dynamic&gt; json) {
      return User(
        id: json['id'],
        name: json['name'],
        email: json['email'],
        mobile: json['mobile'],
        active: json['active'],
        confirmation_code: json['confirmation_code'],
        confirmed: json['confirmed'],
      );
    }
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
          'id': id,
          'name': name,
          'email':email,
          'mobile':mobile,
          'active':active,
          'confirmation_code':confirmation_code,
          'confirmed':confirmed,
        };
  }
  </code></pre>