Seniorbank - A Simplified Banking Prototype

The project

About

SeniorBank is a prototype designed to enhance digital banking security for elderly users and vulnerable groups who are increasingly targeted by online fraud

The project The project focused on designing a conceptual banking prototype from scratch that combines user-friendly design with fraud prevention concepts, serving as a foundation for more secure digital banking experiences tailored to elderly users.

The resulting prototype features simplified user flows and interface elements adapted to individuals with limited digital skills. Rather than being a finished product, the solution is intended to showcase ideas and inspire further work on inclusive and secure online banking.The report outlines the technical implementation, the agile development process, and the outcome: a web-based prototype released under an open source license

This initiative was developed in collaboration with SpareBank 1 Utvikling which provides digital banking solutions for multiple Norwegian banks

---

Project Objectives and Goals:

• Improve Fraud Prevention: Implement measures to detect and prevent common scams before they succeed.
• Enhance Accessibility: Design an intuitive user experience tailored to elderly users.
• Prototype Security Features: Develop and demonstrate effective fraud prevention techniques without unnecessary complexity.

Scope & Boundaries:

• The prototype does not handle real banking transactions (mock data only).
• Focus on UX/UI and fraud prevention logic, rather than full banking functionality.

How to run

1. Prerequisites
2. Getting Started
3. Environment Variables
4. Auth0 Configuration
5. Database Setup & Migrations
6. Running the App
7. Building & Production
8. Useful Commands
9. Troubleshooting

---

Prerequisites

• Node.js v18 or higher
• Docker & Docker Compose
• Auth0 account (https://auth0.com)

---

Getting Started

1. Clone the repo

   git clone https://github.com/your-username/your-repo.git
   cd your-repo

2. Install pnpm

   npm install -g pnpm@latest-10

3. Install dependencies

   pnpm install

4. Copy .env file

   cp .env.example .env

5. Fill in environment variables (see Environment Variables).

---

Environment Variables

Create a file named .env in the project root with the following keys:

# PostgreSQL connection string (Prisma)
DATABASE_URL="postgresql://user:password@localhost:5690/seniorbank"

# NextAuth.js settings\NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET=#Use [openssl rand -hex 32] to generate a 32 bytes value

# Auth0 (Identity Provider)
AUTH0_ISSUER="https://YOUR_DOMAIN.auth0.com"
AUTH0_CLIENT_ID="YOUR_AUTH0_CLIENT_ID"
AUTH0_CLIENT_SECRET="YOUR_AUTH0_CLIENT_SECRET"

Note: Wrap values in quotes if they contain special characters.

---

Auth0 Configuration

1. Log in to your Auth0 dashboard.

2. Create a new Application > Regular Web Application.

3. Go to Settings and add the following:

   • Allowed Callback URLs: http://localhost:3000/api/auth/callback/auth0
   • Allowed Logout URLs: http://localhost:3000
   • Allowed Web Origins: http://localhost:3000

4. Copy Domain (e.g. your-tenant.us.auth0.com) into AUTH0_ISSUER.

5. Copy Client ID & Client Secret into AUTH0_CLIENT_ID and AUTH0_CLIENT_SECRET.

For more details, see the Auth0 Next.js Quickstart.

---

Database Setup & Migrations

This project uses Docker Compose to run PostgreSQL locally.

1. Start PostgreSQL container

   docker-compose up -d

2. Generate Prisma Client

   pnpm prisma generate

3. Run migrations

   pnpm prisma migrate dev --name init

4. Inspect your database (optional)

   pnpm prisma studio

---

Running the App

• Development

  pnpm run dev

  The app will be available at http://localhost:3000.

• Production (build + start)

  pnpm run build
  pnpm start

---

Running the tests

pnpm run test

---

Building & Production

1. Build

   pnpm run build

2. Start

   pnpm start

---

Useful Commands

Command	Description
pnpm run dev	Start dev server
pnpm run build	Compile for production
pnpm start	Run compiled app
pnpm prisma migrate dev --name init	Apply migrations & generate client
pnpm prisma studio	Open Prisma Studio GUI
docker-compose up -d	Start Docker containers
docker-compose down	Stop & remove Docker containers

---

Troubleshooting

• Database connection errors: Ensure Docker container is running and DATABASE_URL is correct.

• Auth0 callback errors: Check that callback/logout URLs in Auth0 settings match your NEXTAUTH_URL.

• Prisma issues: Try regenerating the client:

  pnpm prisma generate