Installing Auth (Login/Register)

In this guide, we will install the official User Auth module which provides a complete login/register system out of the box.

Prerequisites:

• Project initialized with minimal template (see here for instructions).
• Ensure your server is running (npm run start:dev_server).

1. Role of the Auth Module

The @jopijs/jopimod_user_auth package provides:

1. UI Pages: Ready-to-use /login and /register pages.
2. API Integration: Automatic handling of JWT tokens and sessions.
3. User Store: A simple JSON file for user storage (easy to replace later with MySQL/Postgres).

2. Installation

To install the authentication module, you need to add it to your project's dependencies and run the installation command.

Step 1: Add the dependency

Open your package.json file and add the following entry to your devDependencies:

{
  "devDependencies": {
     "@jopijs/jopimod_user_auth": "latest"
  }
}

Step 2: Install the package

Run the following command in your terminal to download the module and set up the local symlink:

npm install && npm install

Wait for the installation to complete. This will automatically download and link the module into your source directory.

Step 3: Restart your server

Since we modified the npm dependencies, you must restart your server:

npm run start:dev_server

3. Verify Installation

The module automatically registers its routes. Open your browser and navigate to:

http://localhost:3000/login

You should see a login form.

1. Log in using the default credentials: User: admin, Password: admin.
2. You will be authenticated and redirected.

4. Creating a New Account

If you want to create your own user instead of using the default one:

1. Navigate to http://localhost:3000/register.
2. Fill out the form with a new username and password.
3. Click the register button.

5. Where is the Data Stored?

By default, this module stores users in a simple JSON file. This is perfect for local development.

• File Path: src/mod_jopijs@user_auth/user.gen.json

⚠️ Important: If you modify this file manually (e.g., to manually change a role or a password), you must restart your server. JopiJS loads this list into memory at startup; manual changes won't be picked up until the process is restarted.

6. Customizing the Login/Register Pages

The default forms are unstyled. To create a custom, styled version for your application, you can replace them by overriding the following system components:

The components to override are:

• Login Form: @/ui/jopijs.auth.loginForm
• Register Form: @/ui/jopijs.auth.registerForm

For example, to replace the login form, you can create your own version in: src/mod_app/@alias/ui/jopijs.auth.loginForm/index.tsx

👉 Learn more about Component Overrides: Read the Component Overrides Tutorial