supabaseのサンプルにログインも付けた

supabase.io

からリンクしている

github.com

のGitHubのsupabase-flutter-quickstartのサンプルはEmail経由でログインでわかりずらい

このかたもおそらくそのサンプル参考にしてるかと思う。 https://note.com/minato_i/n/nfc6d829f0c65

lib/pages/login_page.dartを以下のようにする。 下段で作成して上段でログインできる。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:supabase_quickstart/components/auth_state.dart';
import 'package:supabase_quickstart/utils/constants.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _SignInPageState createState() => _SignInPageState();
}

class _SignInPageState extends AuthState<LoginPage> {
  bool _isLoadingForSignIn = false;
  bool _isLoadingForSignUp = false;
  late final TextEditingController _loginEmailController;
  late final TextEditingController _signUpEmailController;
  late final TextEditingController _loginPasswordController;
  late final TextEditingController _signUpPasswordController;

  Future<void> _signIn() async {
    setState(() {
      _isLoadingForSignIn = true;
    });

    final response = await supabase.auth.signIn(
      email: _loginEmailController.text,
      password: _loginPasswordController.text,
    );

    if (response.error != null) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(response.error!.message),
        backgroundColor: Colors.red,
      ));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text('Login is success!')));

      Navigator.of(context)
          .pushNamedAndRemoveUntil('/account', (route) => false);
    }

    setState(() {
      _loginEmailController.clear();
      _loginPasswordController.clear();
      _isLoadingForSignIn = false;
    });
  }

  Future<void> _signUp() async {
    setState(() {
      _isLoadingForSignUp = true;
    });

    final response = await supabase.auth.signUp(
      _signUpEmailController.text,
      _signUpPasswordController.text,
    );

    if (response.error != null) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(response.error!.message),
        backgroundColor: Colors.red,
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Check your email for login link!')));
    }
    setState(() {
      _signUpEmailController.clear();
      _signUpPasswordController.clear();
      _isLoadingForSignUp = false;
    });
  }

  @override
  void initState() {
    _loginEmailController = TextEditingController();
    _signUpEmailController = TextEditingController();
    _loginPasswordController = TextEditingController();
    _signUpPasswordController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _loginEmailController.dispose();
    _signUpEmailController.dispose();
    _loginPasswordController.dispose();
    _signUpPasswordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign In')),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
        children: [
          const Text('Log in below'),
          const SizedBox(height: 18),
          TextFormField(
            controller: _loginEmailController,
            decoration: const InputDecoration(labelText: 'Email'),
          ),
          TextFormField(
            controller: _loginPasswordController,
            decoration: const InputDecoration(labelText: 'Password'),
          ),
          const SizedBox(height: 18),
          ElevatedButton(
            onPressed: _isLoadingForSignIn ? null : _signIn,
            child: Text(_isLoadingForSignIn ? 'Loading' : 'Login'),
          ),
          const Divider(color: Colors.white),
          const Text('Sign in below'),
          TextFormField(
            controller: _signUpEmailController,
            decoration: const InputDecoration(labelText: 'Email'),
          ),
          TextFormField(
            controller: _signUpPasswordController,
            decoration: const InputDecoration(labelText: 'Password'),
          ),
          const SizedBox(height: 18),
          ElevatedButton(
            onPressed: _isLoadingForSignUp ? null : _signUp,
            child: Text(_isLoadingForSignUp ? 'Loading' : 'Register'),
          ),
        ],
      ),
    );
  }
}