Using Built-in Authentication

Replyke’s built-in authentication makes it straightforward for developers to implement user sign-up, sign-in, and sign-out functionality in their applications. This is achieved through the useAuth hook. To interact with authentication features, use the useAuth hook. It exposes several key functions and state properties:

Authentication State

The useAuth hook provides access to the current authentication state:

const {
  loadingInitial,
  accessToken,
  refreshToken,
  setRefreshToken,
  // ... authentication functions
} = useAuth();

• loadingInitial: Boolean indicating if the initial authentication state is still loading
• accessToken: The current access token (null if not authenticated)
• refreshToken: The current refresh token (null on desktop/web platforms, used for mobile authentication)
• setRefreshToken: Function to manually set the refresh token (primarily for mobile platforms)

When using the React JS/Native libraries, auth tokens are managed automatically and require no further attention from you.

Authentication Functions

Sign-up

This function allows developers to create a new user account using an email and password. It also supports additional user attributes to provide a more personalized experience.

Parameters:

signUpWithEmailAndPassword: (props: {
  email: string;
  password: string;
  name?: string;
  username?: string;
  avatar?: string;
  bio?: string;
  location?: {
    latitude: number;
    longitude: number;
  };
  birthdate?: Date;
  metadata?: Record<string, any>;
  secureMetadata?: Record<string, any>;
}) => Promise<void>;

Example:

const { signUpWithEmailAndPassword } = useAuth();
 
await signUpWithEmailAndPassword({
  email: "[email protected]",
  password: "securePassword123",
  name: "John Doe",
  username: "johndoe",
  bio: "Loves coding and coffee",
});

Sign-in

This function handles user login using an email and password.

Parameters:

signInWithEmailAndPassword: (props: {
  email: string;
  password: string;
}) => Promise<void>;

Example:

const { signInWithEmailAndPassword } = useAuth();
 
await signInWithEmailAndPassword({
  email: "[email protected]",
  password: "securePassword123",
});

Sign-out

This function signs out the currently authenticated user.

Parameters:

signOut: () => Promise<void>;

Example:

const { signOut } = useAuth();
 
await signOut();

Change-password

This function lets an authenticated user change their password.

Parameters:

changePassword: (props: {
  password: string;
  newPassword: string;
}) => Promise<void>;

Example:

const { changePassword } = useAuth();
 
await changePassword({
  password: "12345678",
  newPassword: "abcdefgh",
});

Request New Access Token

This function requests a new access token using the refresh token. It’s primarily used for mobile platforms where refresh tokens are stored securely. On desktop/web platforms, this function may not be needed as authentication uses cookies instead.

Parameters:

requestNewAccessToken: () => Promise<void>;

Example:

const { requestNewAccessToken } = useAuth();
 
await requestNewAccessToken();

Error Handling

All authentication functions throw errors when they fail. Make sure to wrap them in try-catch blocks:

const { signInWithEmailAndPassword } = useAuth();
 
try {
  await signInWithEmailAndPassword({
    email: "[email protected]",
    password: "securePassword123",
  });
} catch (error) {
  console.error("Sign-in failed:", error.message);
}

Summary

By leveraging these functions and state properties, developers can easily implement comprehensive authentication workflows in their projects. The useAuth hook provides everything needed for user registration, authentication, password management, and token handling, enabling seamless integration into your application.