Sign In a User

Account creation and sign-in with Reflow is handled entirely inside a popup dialog window. The user can enter their account info or connect to a social account using the Reflow-hosted login form displayed in the popup.

For developers, this means that you only need two things to integrate user accounts sign-in:

1. Call the signIn method from a client component.
2. Listen for successful sign-in with the onSignIn callback.

All of the sign-in process will be handled by Reflow in the popup window. While the user is logging in, your app can keep its state since it will remain open in the background - the user never actually navigates away from your website.

Example Integration

In the example below we have a SignInButton client component that is just an HTML button element. When it is clicked it calls the aforementioned signIn function.

app/components/SignInButton.tsx

"use client";

import { signIn } from "@reflowhq/auth-next/client";

export default function SignInButton() {
  return (
    <button
      onClick={() =>
        signIn({
          onSignIn: () => console.log("User signed in!"),
        })
      }
    >
      Sign-in to your account
    </button>
  );
}

The signIn method can be imported from @reflowhq/auth-next/client which contains all of the auth-next client methods.

In the onSignIn callback we simply log a success message. In real use cases this would be the place to render the signed-in state of your app or redirect to another page.

This component can then be added to any page on the server:

app/page.tsx

import getAuth from "@/auth";
import SignInButton from "./components/SignInButton";

export default async function Page() {
  const auth = getAuth();
  const user = await auth.user();

  if (user) {
    return <p>Hello, {user.name}.</p>;
  }

  return <SignInButton />;
}

Intercepting Sign In

You can intercept the sign in process by passing a beforeSignin callback when creating a ReflowAuth instance:

import "server-only";
import { ReflowAuth } from "@reflowhq/auth-next";
import type { User } from "@reflowhq/auth-next/types";

export default function getAuth(): ReflowAuth {
  return new ReflowAuth({
    projectID: 123456,
    secret: "REPLACE_ME_WITH_A_32_CHAR_SECRET",
    beforeSignin: async (user: User) => {
      // Create database records, validate permissions, send emails etc..
      // Return true to allow the user to sign in
      return true;

      // To prevent the sign-in:
      // return false;
    },
  });
}

The beforeSignin callback takes a User object as a parameter. The callback is useful for performing actions every time a user signs in or if you need to prevent the sign in altogether. To prevent the user from logging in you can just return false in your beforeSignin callback.