Construyendo una aplicación en tiempo real con Remix y Supabase

Rate this content
Bookmark
Github

Supabase y Remix hacen que sea fácil construir aplicaciones fullstack. En este masterclass, vamos a aprender cómo usar Supabase para implementar autenticación y autorización en una aplicación en tiempo real con Remix. Únete a Jon Meyers mientras construye esta aplicación desde cero y demuestra cómo puedes aprovechar el poder de las bases de datos relacionales!

FAQ

Puedes comenzar utilizando la autenticación de Superbase configurando proveedores OAuth como GitHub. Primero, configura una aplicación OAuth en GitHub, luego registra los detalles de la aplicación (ID de cliente y secreto de cliente) en Superbase. Asegúrate de configurar las URL de redireccionamiento correctas y habilitar GitHub como proveedor en el panel de Superbase.

Una política de seguridad a nivel de fila (RLS) en Superbase es una forma de autorización que se implementa a nivel de base de datos para controlar el acceso a las filas en una tabla de Postgres. Esta política permite especificar condiciones bajo las cuales los usuarios pueden acceder o modificar datos, asegurando que solamente puedan interactuar con los datos que están autorizados a ver o modificar.

Para configurar una suscripción en tiempo real en Superbase, primero asegúrate de que la replicación esté habilitada para la tabla deseada. Luego, en tu cliente, utiliza la función de suscripción de Superbase para escuchar eventos específicos como inserciones, actualizaciones o eliminaciones. Esto permitirá que tu aplicación reciba actualizaciones en tiempo real cada vez que los datos cambien en la base de datos.

Para insertar datos en Superbase desde una aplicación Remix, puedes crear un formulario en tu componente Remix que envíe datos a una acción. En la acción, utiliza el cliente de Superbase para insertar los datos en la base de datos. Asegúrate de manejar correctamente las autenticaciones y autorizaciones necesarias, como agregar políticas RLS adecuadas para permitir la inserción de datos.

Para desplegar una aplicación Remix con Superbase en Vercel, primero sube tu código a un repositorio de GitHub. Luego, crea un nuevo proyecto en Vercel y vincúlalo con tu repositorio. Configura las variables de entorno necesarias, como la URL de Superbase y la clave API, en Vercel. Finalmente, actualiza cualquier configuración necesaria en Superbase, como las URL de redireccionamiento OAuth, para que apunten a tu aplicación desplegada en Vercel.

Jon Meyers
Jon Meyers
156 min
23 Nov, 2022

Comments

Sign in or register to post your comment.
Video transcription, chapters and summary available for users with access.

Watch more workshops on topic

Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Featured Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Construye y lanza un blog personal usando Remix y Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Construye y lanza un blog personal usando Remix y Vercel
Featured Workshop
Robert Pop
Robert Pop
En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog.
Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente.
Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog
Modelado de Bases de Datos Relacionales para GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Modelado de Bases de Datos Relacionales para GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1      a. Modelado de Datos de Bases de Datos Relacionales      b. Comparando Bases de Datos Relacionales y NoSQL      c. GraphQL con la Base de Datos en menteParte 2 - Hora 2      a. Diseño de Modelos de Datos Relacionales      b. Relación, Construcción de Tablas Multijoin      c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos      a. Herramienta de modelado de datos. El formador utilizará dbdiagram      b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos      c. Hasura
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Los humanos son solucionadores de problemas naturales y somos lo suficientemente buenos en eso que hemos sobrevivido a lo largo de los siglos y nos hemos convertido en la especie dominante del planeta. Debido a que somos tan buenos en eso, a veces también nos convertimos en buscadores de problemas, buscando problemas que podemos resolver. Aquellos que logran sus objetivos de la manera más exitosa son los eliminadores de problemas. Hablemos de la distinción entre resolver y eliminar problemas con ejemplos de dentro y fuera del mundo de la codificación.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Esta charla presenta la nueva convención Flat Routes que probablemente será la predeterminada en una futura versión de Remix. Simplifica la convención existente y también te brinda nuevas capacidades.
El estado de la autenticación sin contraseña en la web
JSNation 2023JSNation 2023
30 min
El estado de la autenticación sin contraseña en la web
¿Podemos deshacernos de las contraseñas ya? Son una mala experiencia de usuario y los usuarios son notoriamente malos con ellas. El advenimiento de WebAuthn ha acercado al mundo sin contraseñas, pero ¿dónde nos encontramos realmente?
En esta charla exploraremos la experiencia actual del usuario de WebAuthn y los requisitos que un usuario debe cumplir para autenticarse sin contraseña. También exploraremos las alternativas y salvaguardias que podemos utilizar para mejorar la experiencia de las contraseñas y hacerla más segura. Al final de la sesión, tendrás una visión de cómo podría ser la autenticación en el futuro y un plan para construir la mejor experiencia de autenticación hoy en día.