Configure

This configuration provides guide to add the redshield's default UI for authentication. If you want to add authentication with custom UI you can skip to the additional methods part. Remember to follow the naming conventions as provided , modifying them will break the authentication.


1. AuthPage

This component returns the login and register UI. To add it create a route for authentication as /Auth in your application. Now add the following code to the page.tsx

/Auth/page.tsx

//this should be a server component
import { AuthPage } from "redshield/ui";

const Auth = () => {
  return (
    <div>
       <AuthPage />
    </div>
  );
};
export default Auth;

Note : This has to be a server component.



2. LogOutButton

This returns the button to perform logout action. To use this add following code to your application.

LogOutButtonComponent.tsx

import { LogOutButton } from "redshield/ui";

const LogOutComponent = () => {
    return <LogOutButton className="" />
}
export default LogOutComponent;


3. ResetPassPage

Now create a /ResetPassword route to perform forgot password action. Inside it create a folder named [token] to catch the url token as parameter. Now paste the following code inside the page.tsx i.e. within [token] folder.

/ResetPassword/[token]/page.tsx

import { ResetPassPage } from "redshield/ui";

const ResetPassword = ({ params }: { params: { token: string } }) => {
  return (
    <div>
      <ResetPassPage token={params.token} />
    </div>
  );
};
export default ResetPassword;

Note : This is a server component.


Now your application is ready for the middleware implementaion. 🥂