Redirect from Login

πŸ‘¨β€πŸ’Ό Imagine this scenario... You're a user and you receive an email from us inviting you to add your name in your profile settings. You click the link and are redirected to the login page. After logging in, you're redirected to the home page. You have now forgotten why you came here in the first place and move on with your day.
Boo! That's not a great user experience. Let's fix it.
There are a few ways to do this, but the most common is to use a query string parameter. We'll add redirectTo support to both our login and signup forms. That way, our requireUserId utility can take the request.url and create an appropriate redirectTo query param automatically when it redirects to the login page. Here's how it should work:
// Defaults to the current request.url.
// This would redirect to `/login?redirectTo=%2Fkittens%2Fnew`
await requireUserId(request)

// Can override the default with a custom redirectTo.
// This would redirect to `/login?redirectTo=%2Fkittens`
await requireUserId(request, { redirectTo: '/kittens' })

// Can disable the default with null.
// This would redirect to `/login`
await requireUserId(request, { redirectTo: null })
πŸ§β€β™‚οΈ Supporting redirectTo in /login and /signup is exactly the same, so I'll do the /signup route for you. Deal? Cool πŸ‘
We'll also want to update the link from our /login page to the /signup page so if the user needs to create an account instead, the redirectTo will carry over to that page too.
πŸ¦‰ Don't miss this point! redirectTo query params can be abused by attackers. A baddy could use a redirectTo query param to redirect a user to a malicious site after logging in. So you should always validate the redirectTo query param to make sure it's a valid URL on your site. It's sufficient to just make sure the URL doesn't start with http or https and that it starts with /.
Luckily for us, there's a utility in remix-utils: safeRedirect. Here's the example from their docs:
export async function loader({ request }: LoaderArgs) {
	let { searchParams } = new URL(request.url)
	let redirectTo = searchParams.get('redirectTo')
	return redirect(safeRedirect(redirectTo, '/home'))
}
In our case, we don't need the /home fallback (it defaults to /).
πŸ§β€β™‚οΈ There's not too much to the forms for this one, so I'm going to make you do this one on your own.
I do recommend you add the redirectTo support to the requireUserId util in first.
Login to get access to the exclusive discord channel.
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    81 Β· 21 days ago
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· a month ago
  • πŸ”auth
    The latest web-auth workshop cannot be launch
    QzCurious 🌌:
    I've done: 1. Remove web-auth directory 2. Follow https://github.com/epicweb-dev/web-auth?tab=readme...
    • βœ…1
    7 Β· 2 months ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 3 months ago
  • πŸ”auth
    Github token added on refactor of connection model exercise
    abraham_aguilera 🌌:
    Where does the newly created `GITHUB_TOKEN` come from in the `resolveConnectionData` introduced in t...
    • βœ…1
    2 Β· 6 months ago
  • πŸ”auth
    Potential Security Concern with Empty Session Data in createCookieSessionStorage?
    QzCurious 🌌:
    Since session data can be an empty object, it seems possible that someone could guess when encrypted...
    • βœ…1
    6 Β· 2 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· a year ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· a year ago
  • πŸ”auth
    Where are we getting target_type from?
    Salym πŸš€ πŸ† 🌌:
    I don't see target_type in ur verification schema, how are we generating this?
    • βœ…1
    9 Β· 5 months ago
  • πŸ”auth
    Unknown file extension ".png" for ".../user.png"
    TraderDave79 🌌:
    I'm going through the `web-auth` module and in the "Require Authenticated" exercise, after making th...
    • βœ…1
    9 Β· 6 months ago
  • πŸ”auth
    github.com refuses to connect in workshop app
    TraderDave79 🌌:
    Web Authentication / OAuth / 02. GitHub Strategy / Problem & Solution apps, when clicking "Login wit...
    • βœ…1
    3 Β· 6 months ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· 6 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· 7 months ago
  • πŸ”auth
    RBAC with Entity scoping
    abraham_aguilera 🌌:
    Hi all! I'm working on implementing access control but I want to be able to scope permissions per en...
    • βœ…1
    3 Β· 7 months ago
  • πŸ”auth
    πŸ’Ύdata
    08. ROLE-BASED ACCESS / 02. ROLES SEED - migration to local vs production
    Fabian 🌌:
    So I'm in a bit over my head with this one, in particular with how migration works in a local env vs...
    • βœ…1
    1 Β· 7 months ago
  • πŸ”auth
    Redirect Cookie > 03. Redirect missing ProgressToggle form
    RomΓ‘n πŸ† πŸš€ 🌌:
    This last exercises of the Auth module isn't showing the ProgressToggle form for some reason. I fork...
    • βœ…1
    5 Β· a year ago
  • πŸ’Ύdata
    πŸ”auth
    Prisma batching in the Require Authorized (07/03/solution)
    ajara 🌌 πŸš€:
    When I did the `requireUser` function in `auth.server.ts` I thought about using `requireUserId` func...
    • βœ…1
    4 Β· 8 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Native Logging
    trendaaang 🌌:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • βœ…1
    6 Β· 8 months ago