Vue 3 and Deno.js Authentication: Forgot and Reset Password

Install Deno, run a simple server from the standard library examples, and view hello world on localhost with proper allow-net permissions.

Create a router with a Deno.js library, import routes from a url, run an app on port 8000, and add get endpoints for the homepage and a new page.

Learn how to set up denon to automatically restart a deno app on file changes by configuring a start script and watching specific files, enabling hot reloading on port 8000.

Develop a register api endpoint using an OAuth controller to collect request inputs, return the submitted data, and prepare to store the values in a database.

Learn to configure a database and run migrations with coton, creating a users table with first name, last name, unique email, and password, then apply and rollback migrations.

Register a new user by connecting to the database, inserting first name, last name, and email, and securely hashing the password with bcrypt before saving.

learn to implement a repository pattern for user data by creating an abstract repository, a concrete user repository, and using it in the controller to simplify database interactions.

Develop a login function that fetches a user by email, validates a hashed password, and returns appropriate errors, preparing for JWT generation in the next tutorial.

Generate a JWT token by importing a JWT package, building a payload with the user id and one-hour expiry, and storing it in an HttpOnly cookie named JWT for authentication.

Refactor authentication by creating a helpers directory and an expert class with a generate JWT function using the user id, moving logic away from headers and making it asynchronous.

Create an OAuth middleware to verify cookies and jwt, enabling access only when the user is authenticated, otherwise return an unauthenticated response.

Validate the JWT from cookies to identify the current user, fetch the user by issuer ID, and return a safe JSON with first name, last name, and email (no password).

Master using environment variables in Deno to store secrets, read the key and secret from the environment, handle undefined values, and resolve permission errors by enabling environment access.

Implement forgot password by creating a forgot controller, generating a 12-character token, storing it in a password reset table via a repository, and emailing the user.

Learn to send password reset emails in a Vue 3 and Deno.js app by building a mailer, connecting to MailHog, and composing a reset password email.

Execute reset password flow by validating password match, verifying the token, finding the user by email, updating the password, and returning a success response.

Implement a logout function that deletes cookies and the jwt, returning a concise message to complete the Vue 3 and Deno.js authentication flow.

Configure cors to allow credentials and pass cookies to the front end by setting origin to a regular expression that accepts localhost ports 3000, 4200, and 8844.

Install vue using npm globally, create a Vue 3 project with TypeScript, select defaults, run the server, and open the app URL in a browser.

Rebuild the app navigation for a Vue 3 and Deno.js authentication project by adding bootstrap navigation, creating login and register pages, and wiring routes to link home, login, and register.

Build a register page for Vue 3 and Deno.js authentication by adapting a sign-in form, adding first name, last name, and password confirm, and wiring inputs for future submission.

Submit the registration form using a submit function, prevent the page refresh, and post user data with axios to a local API. On success, redirect to the login page.

Implement a login flow in a Vue 3 and Deno.js app by posting credentials, enabling withCredentials, and redirecting to the home page after a JWT cookie is set.

Display the current logged-in user on the homepage by fetching user data on mount and updating a message with the first and last name, plus a log out button.

Manage authentication state with Vuex in a Vue 3 app by creating an is-authenticated flag, actions, and mutations, then show a logout button and sync UI with navigation.

build a forgot password flow in a vue 3 app, creating the forgot component, handling email input, posting to the forgot endpoint with axios, and showing success or error notifications.

Build a reset password component modeled on the registered form; collect password and confirmation, fetch the token from the URL, post with axios, and redirect to login on success.