DEV Community

mustafa3max
mustafa3max

Posted on

Building a Complete Authentication System in Flutter Using Hosteday

#flutter #mobile #security #tutorial

In this tutorial, you will implement a practical scenario that connects a Flutter application with the Hosteday platform to create a real-world authentication system similar to production apps. The goal goes beyond basic login and registration—it focuses on building a full authentication flow that starts when the app launches, handles session management, and ends with displaying user data and managing logout correctly.

This system is based on token-based authentication, where the app receives a token from the server after login or registration. This token is then used to access protected resources.

Why this approach works well

  • User data is not stored locally; it is always fetched from the server
  • The token is securely stored using FlutterSecureStorage
  • The UI automatically adapts based on authentication state

Hosteday simplifies backend development by providing a ready-to-use environment. Instead of building everything from scratch, you get:

  • A complete authentication system (register, login, token handling)
  • Prebuilt REST APIs for user and data management
  • Easy integration with Flutter using libraries like http
  • Support for Bearer Token authentication compatible with secure storage

This allows developers to focus more on UI and user experience instead of backend complexity. It also supports scalability and clean project organization, making it suitable for real-world applications.

🔗 https://hosteday.com/

1. App Entry Point

The application starts from main.dart:

void main() {
  runApp(const App());
}
Enter fullscreen mode Exit fullscreen mode

2. Authentication Gate (Auth Gate)

Instead of navigating directly, the app first checks if a saved session exists:

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: const FlutterSecureStorage().read(key: 'token'),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final token = snapshot.data;
          if (token != null && token.isNotEmpty) {
            return const ProfilePage();
          }
        }

        return const RegisterPage();
      },
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Concept

  • If a token exists → user is authenticated
  • If no token → show registration/login screen

3. User Registration

When the user submits their data:

await AuthApi.register(
  name: name.text,
  email: email.text,
  password: password.text,
);
Enter fullscreen mode Exit fullscreen mode

API Request 

POST /api/auth/register
Enter fullscreen mode Exit fullscreen mode

What happens

  • Data is sent to Hosteday
  • A token is returned
  • The token is stored locally
  • User is redirected to the profile page

4. User Login

Same flow, but using existing credentials:

await AuthApi.login(
  email: email.text,
  password: password.text,
);
Enter fullscreen mode Exit fullscreen mode

Result

  • Token is received
  • Token is saved securely
  • User is logged into the app immediately

5. Fetching User Profile

After authentication, the token is used to request user data:

final token = await _storage.read(key: 'token');
return UserApi.getUser(token!);
Enter fullscreen mode Exit fullscreen mode

API Request 

GET /api/user
Authorization: Bearer TOKEN
Enter fullscreen mode Exit fullscreen mode

Returned Data

  • Name
  • Email
  • Profile image
  • Activation status

6. Logout 

await UserApi.logout();
Enter fullscreen mode Exit fullscreen mode

What happens

  • Logout request is sent to the server
  • Token is removed from device
  • User is redirected to the start screen

7. Full Authentication Flow

The app follows this sequence:

  1. App launches
  2. Check for stored token
  3. If exists → show Profile
  4. If not → show Register/Login
  5. On successful authentication → save token
  6. On logout → delete token and redirect

Important Notes

  • All protected requests rely on Bearer Token
  • FlutterSecureStorage ensures secure local storage
  • The architecture separates:
    • UI (interface)
    • API logic (network layer)

Next Step

In the next lesson, you will build on this system by:

  • Creating products
  • Displaying them inside the app
  • Linking them to the authenticated user

This will fully depend on the authentication system built here.

Source Code

The full project used in this tutorial is available on GitHub. You can explore it, run it, or use it as a starting point for your own application. Having access to the complete codebase helps you understand how UI and APIs connect in practice, not just theory.

🔗 https://github.com/mustafa3max/lesson-hosteday-flutter/tree/lesson-1

Top comments (0)