GlueStack UI

Comment implémenter l'inscription, la connexion et la déconnexion en utilisant GlueStack UI avec Next.js et Supabase.

Notez que GlueStack UI est une bibliothèque de composants React Native, mais nous allons l'adapter pour une utilisation web avec Next.js.

Tout d'abord, assurez-vous d'avoir installé les dépendances nécessaires :

npm install @gluestack-ui/themed @gluestack-style/react @supabase/supabase-js

Ensuite, créez les composants suivants :

1. Composant d'inscription (SignUp.js)

import React, { useState } from 'react';
import { supabase } from '../lib/supabase';
import {
  Button,
  Input,
  VStack,
  FormControl,
  Heading,
  Text,
} from '@gluestack-ui/themed';

export default function SignUp() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSignUp = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    const { error } = await supabase.auth.signUp({ email, password });

    if (error) {
      setError(error.message);
    } else {
      setEmail('');
      setPassword('');
    }

    setLoading(false);
  };

  return (
    <VStack space={4} width="100%" maxWidth="300px">
      <Heading size="xl">Inscription</Heading>
      <FormControl>
        <Input
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
        />
      </FormControl>
      <FormControl>
        <Input
          placeholder="Mot de passe"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />
      </FormControl>
      <Button onPress={handleSignUp} isLoading={loading}>
        S'inscrire
      </Button>
      {error && <Text color="red.500">{error}</Text>}
    </VStack>
  );
}

2. Composant de connexion (SignIn.js)

import React, { useState } from 'react';
import { supabase } from '../lib/supabase';
import {
  Button,
  Input,
  VStack,
  FormControl,
  Heading,
  Text,
} from '@gluestack-ui/themed';

export default function SignIn() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSignIn = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    const { error } = await supabase.auth.signInWithPassword({ email, password });

    if (error) {
      setError(error.message);
    } else {
      setEmail('');
      setPassword('');
    }

    setLoading(false);
  };

  return (
    <VStack space={4} width="100%" maxWidth="300px">
      <Heading size="xl">Connexion</Heading>
      <FormControl>
        <Input
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
        />
      </FormControl>
      <FormControl>
        <Input
          placeholder="Mot de passe"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />
      </FormControl>
      <Button onPress={handleSignIn} isLoading={loading}>
        Se connecter
      </Button>
      {error && <Text color="red.500">{error}</Text>}
    </VStack>
  );
}

3. Composant de déconnexion (SignOut.js)

import React from 'react';
import { supabase } from '../lib/supabase';
import { Button } from '@gluestack-ui/themed';

export default function SignOut() {
  const handleSignOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) {
      console.error('Erreur lors de la déconnexion:', error);
    }
  };

  return <Button onPress={handleSignOut}>Se déconnecter</Button>;
}

4. Utilisation dans une page Next.js

Voici comment vous pourriez utiliser ces composants dans une page Next.js :

import { useState, useEffect } from 'react';
import { supabase } from '../lib/supabase';
import SignUp from '../components/SignUp';
import SignIn from '../components/SignIn';
import SignOut from '../components/SignOut';
import { VStack, Text } from '@gluestack-ui/themed';

export default function AuthPage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUser(session?.user ?? null);
      }
    );

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, []);

  return (
    <VStack space={8} alignItems="center" padding={4}>
      {user ? (
        <>
          <Text>Connecté en tant que : {user.email}</Text>
          <SignOut />
        </>
      ) : (
        <>
          <SignUp />
          <SignIn />
        </>
      )}
    </VStack>
  );
}

N'oubliez pas d'envelopper votre application avec le provider de GlueStack UI dans votre fichier _app.js :

import { GluestackUIProvider } from "@gluestack-ui/themed"

function MyApp({ Component, pageProps }) {
  return (
    <GluestackUIProvider>
      <Component {...pageProps} />
    </GluestackUIProvider>
  )
}

export default MyApp

Ces composants fournissent une base solide pour l'authentification dans votre application Next.js avec Supabase, en utilisant GlueStack UI pour le style et la structure.