Flutter: Paquete supabase_flutter

2025-01-26T14:00:00-05:00 | 4 minutos de lectura | Actualizado en 2025-02-15T13:16:02-05:00

jaimetellezb

🚀 App para utilizar autenticación con Supabase. 👤 🔑

Tabla de Contenido

Tabla de Contenido
Introducción
Conclusión
Referencias

Introducción

En esta ocasión, realizaremos una guía para aprender a utilizar la autenticación en Flutter apoyándonos en Supabase.

Crear proyecto Flutter

Se pueden saltar este paso, en caso de que ya tengan experiencia con la creación de proyectos en Flutter y sus emuladores, si apenas están iniciando en Flutter si es recomendable que vayan paso a paso.

Debemos tener instalado Flutter en nuestro equipo previamente, podemos seguir esta guía o apoyarnos con la documentación oficial.
Para iniciar, vamos a crear nuestro proyecto Flutter, simplemente ejecutando el siguiente comando:

flutter create auth_supabase_flutter

Una vez instalado, podemos ingresar al proyecto con cd auth_supabase_flutter para empezar a usarlo.
Abrimos el proyecto con un editor de texto, en este caso vamos a utilizar Visual Studio Code .
Ahora debemos instalar los paquetes o dependencias con el comando flutter pub get, también se puede realizar con ayuda del editor, si abrimos el archivo pubspec.yaml, aparecerá en la parte superior derecha el ícono de descarga.

get-packages

Ahora podemos probar que todo esté correcto, desplegando la app en un emulador, un dispositivo móvil o en web.
- Tenemos emulador para iOS (Xcode) y para Android (Android Studio). En caso de estar en un sistema operativo macOS, la opción sería Xcode , de lo contrario utilizar Android Studio. Dejo esta guía para crear emuladores tanto Android como para iOS .
Una vez configurado el emulador, tenemos varias opciones para correrlo:
- Ir al archivo lib/main.dart y ejecutarlo desde el botón play (recomendado), esta opción es la más recomendada ya que podemos hacer debug de nuestro código.
- Ejecutar el comando flutter run, allí se empezará a instalar la app para mostrarla dependiendo del dispositivo que tengamos seleccionado. Podemos seleccionar el dispositivo que queramos con la opción Ctrl/Cmd + Shift + P, allí escribimos Flutter: Select Device y seleccionamos el dispositivo.

Si no tuvimos inconvenientes con los pasos anteriores, veremos nuestra app corriendo correctamente.

emulator

Ahora, ya tenemos el proyecto bien configurado y listo para iniciar nuestra aplicación.

Instalar paquete supabase_flutter

Para instalar el paquete de supabase_flutter , tenemos un par de opciones:

Ejecutando el comando flutter pub add supabase_flutter, descarga la última versión del paquete.
Agregarlo directamente en el archivo pubspec.yaml.

dependencies:
  supabase_flutter: ^2.8.3

Configuración de Supabase

Para poder utilizar los servicios de Supabase, debemos tener un cliente que se conecte con nuestro proyecto Supabase.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // credenciales de Supabase
  await Supabase.initialize(url: 'SUPABASE_URL', anonKey: 'SUPABASE_ANON_KEY');
  runApp(const HomeWidget());
}

Para obtener el valor de SUPABASE_URL y SUPABASE_ANON_KEY:

Debemos ingresar a nuestra cuenta en Supabase
Ingresar al proyecto o crear uno en caso de no tener aún
Ir a Project Settings -> CONFIGURATION -> API, allí están ambos valores.

Autenticación con correo y contraseña en Supabase

Para utilizar la autenticación en Flutter con Supabase, vamos a hacer uso de algunas de las funciones que nos brinda el paquete.

Supabase.instance.client.auth.signInWithPassword: Función que recibe un email y un password, para autenticarse con Supabase.
Supabase.instance.client.auth.signUp:Función para realizar el registro de un usuario en Supabase, por medio del email y password.
Supabase.instance.client.auth.signOut: Función que se encarga de cerrar la sesión del usuario actual.
Supabase.instance.client.auth.currentUser: Variable que devuelve el usuario actual en caso de existir, sino devuelve null.
Supabase.instance.client.auth.onAuthStateChange.listen: Función que se encarga de escuchar los eventos de los cambios en la autenticación:
- signedIn: Inicio de sesión.
- signedOut: Cierre de sesión.
- tokenRefreshed: Token de acceso actualizado.
- passwordRecovery: Recuperación de contraseña iniciada.
- userUpdated: Datos del usuario actualizados.
```
 Supabase.instance.client.auth.onAuthStateChange.listen((data) {
    setState(() {
      _user = data.session?.user;
    });
  });
```

Todo lo anterior dentro de una clase SupabaseService.

class SupabaseService {
  final SupabaseClient _client = Supabase.instance.client;

  // Métodos de autenticación
  Future<AuthResponse> signIn(
      {required String email, required String password}) async {
    try {
      return await _client.auth.signInWithPassword(
        email: email,
        password: password,
      );
    } on AuthException catch (e) {
      if (e.code == 'user_already_exists') {
        throw AuthException('El correo ya está registrado');
      } else {
        throw AuthException('Error en el login:: ${e.message}');
      }
    }
  }

  Future<void> signOut() async {
    await _client.auth.signOut();
  }

  User? currentUser() {
    return _client.auth.currentUser;
  }

  Future<User?> signUpWithEmail({
    required String email,
    required String password,
  }) async {
    try {
      final response = await _client.auth.signUp(
        email: email,
        password: password,
      );
      return response.user;
    } on AuthException catch (e) {
      if (e.code == 'user_already_exists') {
        throw AuthException('El correo ya está registrado');
      } else {
        throw AuthException('Error de registro: ${e.message}');
      }
    }
  }
}

Vista

auth

Ejemplo completo en GitHub

https://github.com/jaimetellezb/auth_supabase_flutter

Conclusión

En conclusión, Supabase es una gran alternativa para integrar formas de autenticación en nuestros proyectos o apps Flutter, de una forma fácil e intuitiva para desarrollar.

¡Gracias por leer!