Events.ClientApp

Events.ClientApp is the Vue 3 front-end for Topic 2.

It uses:

Vite
Vue 3
PrimeVue
Auth0 Vue SDK

It is intended as a companion UI for the Events.WebAPI backend and demonstrates how the secured API can be consumed from a browser application.

Scripts

Install dependencies:

npm install

Start the development server:

npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

By default, the Vite dev server runs on:

http://localhost:5173

Environment Configuration

The app reads configuration from Vite environment files.

Typical options are:

.env
.env.local

The project already includes:

.env.example

The simplest setup is to copy .env.example to .env.local and fill in the real values.

Example:

Copy-Item Topic2\Events.ClientApp\.env.example Topic2\Events.ClientApp\.env.local

Environment Variables

VITE_AUTH0_DOMAIN Auth0 tenant domain, for example fer-web2.eu.auth0.com
VITE_AUTH0_CLIENT_ID Auth0 client ID for the SPA application

Optional Auth0 settings

VITE_AUTH0_AUDIENCE API audience passed to Auth0 when requesting an access token
VITE_AUTH0_SCOPE Space-separated scopes requested during login

API configuration

VITE_API_BASE_URL Base URL of the Web API

If VITE_API_BASE_URL is not set, the app falls back to:

https://localhost:7150

Example

VITE_AUTH0_DOMAIN=fer-web2.eu.auth0.com
VITE_AUTH0_CLIENT_ID=whed5Hdb8l1b1fGyyAz7Qrdsb2oKcSh3
VITE_AUTH0_AUDIENCE=https://erasmus-sta-2026/events-api
VITE_AUTH0_SCOPE=openid profile email events:read events:write
VITE_API_BASE_URL=https://localhost:7150

Notes

VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID are required if you want the Auth0 login flow to work.
VITE_AUTH0_AUDIENCE and VITE_AUTH0_SCOPE are optional in code, but usually needed if the API expects bearer tokens with a specific audience and scopes.
VITE_API_BASE_URL should point to the running Events.WebAPI instance for local development.
.env.local is for local development and should not be treated as a shared secrets file.

What The Client Demonstrates

login and token acquisition through Auth0
calling the secured Topic 2 API
local development against a separately running ASP.NET Core backend

2.4 KiB Raw Blame History