FormStrategy
A Remix Auth strategy to work with any form.
Supported runtimes
| Runtime | Has Support |
|---|---|
| Node.js |
|
| Cloudflare |
|
How to use
This Strategy gives you back on the verify callback the FormData instance of the request and the context from the action if it was was defined.
This let you use any field from that form with the names you want, so you are not limited to only a username+password or email+password, if you need a third field you can use it.
First, install the strategy and Remix Auth.
$ npm install remix-auth remix-auth-form
Then, create an Authenticator instance.
import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/services/session.server";
import { User, findOrCreateUser } from "~/models/user";
export let authenticator = new Authenticator<User>(sessionStorage);
And you can tell the authenticator to use the FormStrategy.
import { FormStrategy } from "remix-auth-form";
// The rest of the code above here...
authenticator.use(
new FormStrategy(async ({ form, context }) => {
// Here you can use `form` to access and input values from the form.
// and also use `context` to access more things from the server
let username = form.get("username"); // or email... etc
let password = form.get("password");
// You can validate the inputs however you want
invariant(typeof username === "string", "username must be a string");
invariant(username.length > 0, "username must not be empty");
invariant(typeof password === "string", "password must be a string");
invariant(password.length > 0, "password must not be empty");
// And if you have a password you should hash it
let hashedPassword = await hash(password);
// And finally, you can find, or create, the user
let user = await findOrCreateUser(username, hashedPassword);
// And return the user as the Authenticator expects it
return user;
})
);
In order to authenticate a user, you can use the following inside of an ActionFunction:
export const action: ActionFunction = async ({ request, context }) => {
return await authenticator.authenticate("form", request, {
successRedirect: "/",
failureRedirect: "/login",
context, // optional
});
};
56 Dec 25, 2022
20 Dec 26, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Dec 24, 2022
10 Oct 14, 2022
321 Dec 29, 2022
80 Jan 5, 2023
13 Dec 31, 2022
61 Dec 22, 2022
167 Dec 9, 2022
8 Dec 8, 2022
9 Jun 6, 2022
67 Dec 22, 2022
6 Mar 29, 2022
13 Nov 22, 2022
2 Dec 15, 2022