React

Aperçu Demander simplement aux utilisateurs de s’inscrire n’est pas seulement ennuyeux—cela pourrait vous coûter 45% de vos clients potentiels, selon la célèbre étude de cas du bouton à 300 millions de dollars. Pire encore, cette friction est amplifiée sur les petits écrans, où les taux d’abandon grimpent à 86% pour les utilisateurs mobiles qui refusent tout simplement de taper de longs formulaires, selon des données récentes sur l’abandon. À la fin de cet article, vous aurez un flux où les utilisateurs peuvent d’abord s’approprier de la valeur et s’inscrire ensuite, sans perdre leurs données. Ainsi, vous pourrez éviter cette énorme perte de clients potentiels. ...

Prérequis Ce tutoriel fait suite à mon article précédent sur la gestion de l’authentification de l’API Rails avec un frontend React. Comment ça marche Après la connexion, le navigateur stocke un cookie sécurisé qui est automatiquement ajouté à chaque requête client. Un site attaquant peut forger des requêtes au nom de l’utilisateur, et elles seront authentifiées. Pourquoi CORS n’arrête pas le CSRF CORS (Cross-Origin Resource Sharing) contrôle qui peut lire les réponses des requêtes cross-origin. Il n’empêche pas le navigateur d’envoyer la requête. CSRF ne repose pas sur la lecture de la réponse — il a juste besoin que le navigateur envoie une requête valide avec des cookies. Solution : Ajouter un autre vecteur de validation Générer un jeton CSRF sur le serveur. Le renvoyer lors de l’authentification. Inclure le jeton CSRF dans le corps de la requête ou un en-tête personnalisé pour chaque requête changeant l’état. Implémentation Rails 8 + React 1. Générer le jeton CSRF sur le serveur Configurez Rails pour générer un jeton CSRF et l’envoyer dans un cookie. ...

Introduction React Native n’a pas d’élément <form> natif, et la gestion de l’état de plusieurs entrées peut être verbeuse. C’est pourquoi je vais vous montrer une façon simple de gérer les formulaires en utilisant Formik et Yup. Prérequis Expo CLI installé Connaissances de base de React Native Utilisez <PaperProvider> de React Native Paper Configuration npx create-expo-app my-formik-form cd my-formik-form npm install formik react-native-paper yup Comment fonctionne Formik avec React Native 1. Importer les dépendances app/components/MyForm.tsx ...

Aperçu Dans ce tutoriel, vous apprendrez à implémenter une authentification basée sur les cookies avec Rails 8. Rails propose de nombreuses méthodes d’authentification, mais les cookies sont sécurisés, faciles à utiliser et gérés automatiquement par les navigateurs. Alors que de nombreux tutoriels utilisent JWT, celui-ci présente un inconvénient majeur : où le stocker ? Le stockage local n’est pas sécurisé. Si votre principal consommateur d’API est le navigateur, l’authentification par cookie est plus sûre et plus simple. ...