Email and Password

Users often expect to sign in to your site with a password. Openfort Auth helps you implement password-based auth safely, using secure configuration options and best practices for storing and verifying passwords.

Sign up a user

You directly receives the access token after the user confirms their email.

To sign up the user, call signUpWithEmailPassword() with their email address and password.

You can optionally specify a URL to redirect to after the user clicks the confirmation link. This URL must be configured as a Redirect URL. If you don't specify a redirect URL, the user is automatically redirected to your site URL.

auth.tsx

import openfort from "./openfortConfig"
 
async function signUpNewUser(email:string, password:string, firstName:string, lastName:string) {
  await openfort.auth.signUpWithEmailPassword({
    email: email,
    password: password,
    options: {
      data: {
        name: firstName + ' ' + lastName,
      },
    },
  });
}

If you want the users to verify their email, you can send them an email after sign up with:

await openfort.auth.requestEmailVerification({
    email: email,
    redirectUrl: 'http://example.com/account/register',
  });

Log in a user

When your user signs in, call logInWithEmailPassword() with their email address and password:

import Openfort from "@openfort/openfort-js";
 
const openfort = new Openfort({
  baseConfiguration: {
      publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY"
  }
});
 
async function logInpUser() {
  await openfort.auth.logInWithEmailPassword({
    email: email,
    password: password
  });
}

Uppon successful authentication, the SDK will return a token that can be used to authenticate the user in your application.

{
  "player": {
      "id": "pla_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
      "object": "player",
      "createdAt": 1710976453,
      "linkedAccounts": [
          {
              "provider": "email",
              "disabled": false,
              "verified": true,
              "email": "hello@example.com"
          }
      ]
  },
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJhdWQiOiJwcm9fOGY3ZTM1NTktMjhkNy00MWE2LTgxNGMtMjU0OTkzZTdkNjFkLXRlc3QiLCJleHAiOjE3MTA5ODI2MDIsImlhdCI6MTcxMDk3OTAwMiwiaXNzIjoib3BlbmZvcnQueHl6Iiwic2lkIjoiMzhhMDdmMzktMTUxOS00MjE0LWJmNmMtNzI0Zjg0ZDBiZGQwIiwic3ViIjoicGxhX2NjOWVkMmI3LWM1ZjUtNGM0My04ZGNhLWM0YjEwNGJhMTc2MiJ9.EcFtS__GwyxJu1S3tO7jMBbTCIJCpqsoNxxJrqILrKjNl2N5-SIMG2z_s2Vs8ztG6KAVy6zIp6P9GzfD7s4JiA",
  "refreshToken": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJzaWQiOiIzOGEwN2YzOS0xNTE5LTQyMTQtYmY2Yy03MjRmODRkMGJkZDAiLCJpYXQiOjE3MTA5NzkwMDIsImV4cCI6MTcxMzU3MTAwMn0.koNd4eoevBQQR3-z0CMGL5qVzOURZEeAgjvrHMRloLgDbScS2Qbi4W-vf2fE0fYOWUIAHnAq7cDABNwSQrEvSQ"
}

Resetting a password (Forgot password)

Step 1: Create a reset password page

Create a reset password page. This page should be publicly accessible. Collect the user's email address and request a password reset email. Specify the redirect URL, which should point to the URL of a change password page.

await openfort.auth.requestResetPassword({
  email: 'hello@example.com',
  redirectUrl: 'http://example.com/account/update-password',
})

Step 2: Create a change password page

Create a change password page at the URL you specified in the previous step. This page should be accessible only to authenticated users. Collect the user's new password and call updateUser to update their password.

You should also pass the state parameters, which should be available in the URL of the change password page. This is to prevent CSRF attacks.

await openfort.auth.resetPassword({
  email: 'hello@example.com',
  password: 'new-password',
  state: 'verification-state',
})