remix-auth
Simple Authentication for Remix
Simple Authentication for Remix
This video shows how to configure VS Code to debug your Remix loaders and actions. NOTE: You can now use the `debugger` statement instead of the external `debug()` function. I tried this before, but it didn't work. Not sure why it works now. You still can't set a breakpoint inside a route module, but you can add `debugger` statement and it will break there. You can then step through your code. I will be re-recording this video with this new info. Get the launch configuration here: https://rmx.fyi/debug
This is a proof of concept for showing how you can expose loader functions from your components to use in your routes.
When you build a web application, you may reach a point where some performance problems could be solved by a...
A platform for sharing everything about Remix
Magically create forms + actions in Remix!
Remix template with Typescript, Tailwind, Zod and Prisma
A template to get a Remix PWA up and running
This package contains simple utility functions to use with [Remix.run](https://remix.run).
An objective comparison between Remix and Next.js
## Problem
If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...
Personal website
Use TailwindCSS with Remix without an extra build step!
Have you heard about our new Remix Stacks template the K-pop Stack? It combines Remix, Supabase, Tailwind, and more to give you a note creation app with auth to help jump start your own Remix creation. Check out how to make it your own and get it deployed to fast and free! Repo: https://github.com/netlify-templates/kpop-stack Blog Post: https://www.netlify.com/blog/deploy-your-remix-supabase-app-today!/
A strategy to use and implement OAuth2 framework for authentication with federated services like Google, Facebook, GitHub, etc.
Static file serving and directory listing
Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes. We will learn about: loaders and actions in Remix querying and mutating data with Supabase authentication with GitHub authorization with RLS merging client and server state with realtime events deploying a Remix app to Vercel This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉
You can use Zod to validate form input and create typed TypeScript objects in a Remix action function that is handling the form data.
WIP
There is a misconception that Remix is only for static sites. This is a how-to guide for building a full-stack app with the new framework + Prisma + Supabase, and deploying it to Vercel.
Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again.
The easiest way to translate your Remix apps
Utilities for using GraphQL with a Remix app
A PWA handler for Remix
Zod utilities for Remix loaders and actions.
Interactive app to demonstrate how routing works in Remix
Snippets of code translated from Next.js to Remix. Learn Remix by example.
HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.
The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.
A Stripe focused Remix Stack that integrates User Subscriptions, Authentication and Testing. Driven by Prisma ORM. Deploys to Fly.io
A React component for responsive images in Remix
Upload files to S3 compatible API - I'm using Backblaze B2 - with Remix and parseMultipartFormData
ESlint config for remix app
Validation helpers for [zod](https://github.com/colinhacks/zod) specifically for parsing `FormData` or `URLSearchParams`. This is particularly useful when using [remix](https://github.com/remix-run/remix) and combos well with [remix-validated-form](https:
Pagination for Remix apps
Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...
If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...
Form component and utils for easy form validation in remix
If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...
A package for easily managing SEO meta and link tags in Remix.
My personal website
ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment
This package makes it simple to use Zod with standard URLSearchParams and FormData which are typically used in Remix apps.
Query for Remix-Run
Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...
Easy to follow recipes for the Remix.run framework
Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.
As apps grow, almost all will need user authentication. Fortunately, Remix gives us tools to make this easy. In this post, we'll look at how we can add authentication to an app using Remix.
Learn more at https://remix.run
We will walk through a simple demonstration of a remix application using nested routes and parameterized routes. The use of nested routes helps me with component design and separation when architecting an application. Parameterized routes / Dynamic Routes contain state information that can through the parameters that are defined on the route. This provides powerful flexibility when designing your app and app's components. Putting the two together in an simple solution to be a reference when you build something amazing. Speaker bio: Aaron is an Information Technology Strategist, Thought Leader, and Diversity and Inclusion Trailblazer - Founder & CEO of Clearly Innovative. He believes technology and in his case coding is an enabler and an equalizer. Aaron has focused a large part of his career training and developing individuals who want to get into tech but cannot find the opening; through the apprenticeship program he ran at Clearly Innovative, teaching web and mobile development at Howard University, and the free technical videos on his Youtube Channel he just want to help others get a seat at the table of tech and innovation. Learn more at https://remix.run/conf/2022/speakers/aaron-k-saunders
Useful utilities and simplified validation for actions and loaders.
Authentication helpers for loaders and actions in Remix.
Check out the new v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Indie stack 👉 https://github.com/remix-run/indie-stack
Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date...
“The edge” isn’t just about static assets anymore. It’s increasingly becoming a place for dynamic assets resulting from compute. Remix is taking full advantage of this next generation of edge computing.
Latest version: 1.0.1, last published: 6 months ago. Start using eslint-plugin-remix in your project by running `npm i eslint-plugin-remix`. There are no other projects in the npm registry using eslint-plugin-remix.
**[Your Remix app](https://remix.run/docs/en/v1/pages/stacks)** is fast by default, but with a few edits to **root.tsx** you can make it feel even faster...
If you're using multiple forms on the same route, you may use the useFetcher hook, which also...
Spend A Full Day Immersed in Remix with Kent C Dodds
Get better insight on why your Remix app crashed during development 💥
The web ecosystem can feel like it moves too fast sometimes. We're sensitive to that at Remix so we've designed it with your future in mind. Get good at Remix, get better at the web.
The GitHub strategy is used to authenticate users against a GitHub account. It extends the OAuth2Strategy.
Delivering the best experience to users is critical for your success. Metronome lets you visualize how your Remix app performs from top to bottom.
This podcast will inspire you to build excellent user experiences for the web. Sometimes with Remix, the modern web framework.
A Remix Newsletter
Learn more at https://remix.run
The blog of sergiodxa
In Today's episode will cover: - @Stripe Integration - Webhook Setup - Checkout Session and Payment Testing These videos are free and created for the community, support will be much appreciated! 🫶
The blog of sergiodxa
We migrated our site to a new hosting provider, and with it a new React framework. We expected the site to run a little slower. Our tests proved otherwise.
Remix + React 18 Streaming
The Constraints API is a browser API that has been available since the times of IE10, yep, that old....
Remix relies on CDNs and cache control headers to get the best web performance possible. Here we’ll compare various caching strategies, including Static Site Generation and Increment Static Regeneration, and compare the tradeoffs.
In this video I convert the Remix demo app to using Firebase Cloud Firestore database and Firebase Authentication. We'll also take a look at using Sessions and Cookies in Remix. Watch this first if you are not yet familiar with Remix: https://youtu.be/SmMqdF2v30s Github: https://github.com/ianlenehan/my-remix-app
🎈 PartyKit ⤫ Remix 💿
show off your sneaker collection
The first thing you usually need for any route is a way to load data from the server. Remix makes it easy with loaders. Learn more at https://remix.run/docs
Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a...
Should you host your Remix app on a serverless provider like Netlify, Vercel, Cloudflare Pages, or AWS Lambda? Or a long-lived server like Fly, Render, Railway, or DigitalOcean? This guide will help you choose the right hosting option for your app.
Remix Authentication Using Remix-Auth Package #remix #remixrun #reactjs This is a walkthrough of a sample application using the remix-auth package which is a passport-like framework for simplifying authentication of your remix application using specific packaged strategies. In this example, I am using the Form Strategy to show a simple login flow Remix Playlist - https://buff.ly/3GuKVPS ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro, What is Remix Auth 01:20 - Sample App Flow 03:10 - Walking through the code 04:10 - Checking if a user is authenticated, in protected pages 04:42 - Getting session information from the authenticator, in protected pages 05:30 - Logging out, session cleanup 06:10 - Getting Errors when logging In 06:50 - Logging In using the authenticator 08:10 - Setting Up The Authenticator 09:59 - Throwing Errors When Authenticating, Returning Successful Session Info 12:10 - Why this is awesome 13:10 - App Flow Review 16:01 - Redirecting from the login page if a session already exists 18:28 - Wrap Up Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Remix Auth - https://github.com/sergiodxa/remix-auth Remix Auth Form Strategy - https://github.com/sergiodxa/remix-auth-form Source Code - https://github.com/aaronksaunders/remix-auth-form-strategy Remix Playlist - https://buff.ly/3GuKVPS #reactremix #remixrun #authentication #remixauth #remixformstrategy #reactjs
Remix template with Vite, Tailwind CSS, and Fly.io support
First version of the Remix plugin for Nx. #reactjs #monorepo #nx
Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com
Remix template with Turborepo, TypeScript and pnpm. The remix app deploys to fly.io or build to Docker image. Example packages for Database with prisma, Tsyringe dependency injection, UI, and internal TypeScript packages.
While Remix and browsers model mutations as form navigations, `useFetcher` allows you to get the same programming model without causing a navigation. This allows apps to add pending and optimistic UI to multiple elements at the same time. Concurrent Mutations! Learn more at https://remix.run
Creating An Authentication Flow Using Remix and Supabase Tutorial #remix #supabase #reactjs Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. Simple application showing authentication flow and session management using react remix and supabase See Part Two where we cover file upload and writing records to Supabase - https://youtu.be/ySQcGc9NICo Timestamps -------------------- 00:00 What's Covered In The Tutorial 02:15 Application Feature Walkthru 03:19 Looking At Code Starting With index.js, Covering Actions & Loaders Sessions 07:38 Managing Sessions in Authentication Session Using Remix 08:40 Logging In A User In Supabase and Creating the Session 12:18 Creating A New User Account In Supabase and Creating A Session 14:40 Running The Project 15:13 Using Remix Server 15:34 Configuring Environment With .env 16:16 Running Remix App and Verifying Data In Supabase 18:02 Final Thoughts ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Supabase Documentation - https://supabase.com/ Source Code - https://github.com/aaronksaunders/supabase-remix-auth Supabase Playlist - https://youtu.be/MVy46MGmfOQ #reactremix #remixrun
The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.
Remix + Cloudflare Workers + DO + Turborepo
How to get mdx-bundler (by Kent C. Dodds) working with local images
Tutorial on how to create a Remix ecommerce store together with Medusa.
Remix is an amazing React framework that vastly simplifies the process of building fullstack React web apps. With this crash course, you'll learn how Remix allows you to seamlessly blend frontend and backend code into each other. Besides crucial essentials like project setup, routing and styling you'll also learn how to fetch and submit data, and how to integrate backend code into your React application. 👉 If you want to learn more about this awesome React framework, you can explore my full course "Remix - The Practical Guide": https://acad.link/remix (a huge discount will be applied automatically). 👉 Learn more about React.js itself with my bestselling "React - The Complete Guide" course: https://acad.link/reactjs Code attachments: https://github.com/academind/remix-practical-guide-course-resources/tree/main/Code/02%20Essentials Join our Academind Community on Discord: https://academind.com/community Check out all our other courses: https://academind.com/courses ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Follow @academind_real on Instagram: https://www.instagram.com/academind_real • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
An example of prisma working on cloudflare pages with Remix
A template for deploying Remix to AWS with the Serverless framework
This package makes it simple to use Zod with standard URLSearchParams and FormData which are typically used in Remix apps.
This is a proof of concept for showing how you can expose loader functions from your components to use in your routes.
Remix template with Vite, Tailwind CSS, and Fly.io support
Remix package to define routes using the flat-routes convention
This package is a replacement for superjson to use in your Remix app. It handles a subset of types that `superjson` supports, but is faster and smaller.
Example showing how to use global data in your Remix app