Basic Auth with Toastsss!
Basic Authentication for svelte with routes and toast notifications.
Requirements
- Use a writable store to store user data, toast data, and currently logged in user.
- Use
goto
to redirect to a page
- Toast Notification must accept a message and a type
- Use Pick, Omit to create a new type from the given base Types below.
- Additional types are, ToastCreate, UserRegister, UserLogin
/dashboard
will redirect users to login if there is no user logged in.
- A
GenericMessage
type, with status and message properties. Should be the default returns from Login,logout,Register
Data Types
type User = {
email: string;
password: string;
firstName: string;
lastName: string;
role: 'ADMIN' | 'USER' | 'GUEST';
};
type Toast = {
id: number;
text: string;
dismissible: boolean;
duration: number;
type: 'success' | 'error' | 'warning' | 'info';
};
- Login when success directs to dashboard and then the dashboard checks for user role and displays content accordingly
- Register when success directs to login page, use
goto('/login', {replaceState: true})
to persist state history.
- On dashboard a
Welcome back ${lastName, firstName}
should be shown and a logout
button.
- When User is logged in Notification
- When User is Registered Notification
- When User is Logged out Notification
- Invalid Credentials Notification
- When Email is already exists Notification
- When Password is not the same as confirm password Notification
- A demo of toasts with actionable buttons in home page
- Toast Notifications will be displayed on the top right corner of the screen.
- All routes once use is logged in must redirect to
/dashboard
;
Notes
Always use goto('location', {replaceState: true})
to redirect to a page so we preserve the state of the application.
We don't have a persistent data yet and must rely on stores
Pages to read about the requirements