# Routing in OpenDash
This guide provides a step-by-step tutorial on how to register routes in an OpenDash application. Routes are essential for defining navigation paths and managing authentication flows within your application.
## Overview
Routes in OpenDash determine which components are rendered based on the URL path and can specify authentication or permission requirements.
## Step-by-Step Guide
Below is a complete example of how to register routes in an OpenDash plugin. Yet, to register routes you don't need to build a plugin. You can just use the shown methods anywhere in your code, as long as the AppFactory is available.
### Step 1: Import Necessary Modules
First, import the necessary modules and components.
```typescript
import { AppFactory, AppPluginInterface } from "@opendash/core";
import { HomePage } from "./routes/HomePage";
import { LoginPage } from "./routes/LoginPage";
import { SignupPage } from "./routes/SignupPage";
import { ResetPasswordPage } from "./routes/ResetPasswordPage";
import { AdminDashboard } from "./routes/AdminDashboard";
```
### Step 2: Define the Plugin Class
Define your plugin class, implementing the `AppPluginInterface` or just anywhere else inside your codebase where you have access to the AppFactory.
```typescript
export class MyCustomPlugin implements AppPluginInterface {
name = "MyCustomPlugin";
async onFactory(factory: AppFactory) {
this.registerRoutes(factory);
}
private registerRoutes(factory: AppFactory) {
// Route registration logic will go here
}
}
```
### Step 3: Register Routes
Inside the `registerRoutes` method, use the `factory.registerRoute` method to register your routes.
```typescript
private registerRoutes(factory: AppFactory) {
// Home route
factory.registerRoute({
path: "/",
auth: "unauthenticated",
componentSync: HomePage,
});
// Login route
factory.registerRoute({
path: "/login",
auth: "unauthenticated",
componentSync: LoginPage,
});
// Signup route
factory.registerRoute({
path: "/signup",
auth: "unauthenticated",
componentSync: SignupPage,
});
// Password reset route
factory.registerRoute({
path: "/reset-password",
auth: "unauthenticated",
componentSync: ResetPasswordPage,
});
// Admin dashboard route
factory.registerRoute({
path: "/admin/dashboard",
auth: "authenticated",
componentSync: AdminDashboard,
permission: "admin",
});
}
```
### Route Parameters
- `path`: The URL path for the route.
- `auth`: Specifies the authentication state required for the route (`"unauthenticated"`, `"authenticated"`, or `"both"`).
- `componentSync`: The component to render for the route.
- `permission` (optional): Specifies the permission required to access the route. These are typically defined the backend. **This is only for front-end security / order. Please make sure that your backend also checks for permission**
### Example Components
Here is an example of how you might define the components referenced in the routes:
```typescript
import React from 'react';
// Home Page Component
export const HomePage: React.FC = () => {
return <div>Welcome to the Home Page!</div>;
};
// Login Page Component
export const LoginPage: React.FC = () => {
return <div>Please log in to continue.</div>;
};
// Signup Page Component
export const SignupPage: React.FC = () => {
return <div>Sign up for an account.</div>;
};
// Reset Password Page Component
export const ResetPasswordPage: React.FC = () => {
return <div>Reset your password here.</div>;
};
// Admin Dashboard Component
export const AdminDashboard: React.FC = () => {
return <div>Welcome to the Admin Dashboard.</div>;
};
```
## Summary
By following these steps, you can effectively register routes in your OpenDash application, allowing you to define various navigation paths and manage user authentication and permissions. This setup provides a flexible and scalable way to handle routing within your OpenDash plugins.