Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.


Premium Features

Download Video

15. Password Reset Functionality - Part 1

Published 4 years ago

We have a pretty functional login system running at the moment, but what happens if a user forgets their password? Right now, without a way to reset it, they’re kind of screwed.

To fix this we’re going to add password reset functionality which consists of: a user submitting their email address via a forgot password field... receiving a unique URL in their inbox that is only valid for a certain period of time... then creating a new password using this link.

We’ll get into the logistics of why we do things such as send the user a unique URL as we go.

  class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"
  <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
    <h2 class="text-3xl font-bold">Reset Password</h2>
    <p class="mt-6 text-base leading-5 text-gray-600 max-w-sm mx-auto">
      Enter your email below and we'll send you instructions on how to create
      a new password.

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            class="block text-sm font-medium leading-5 text-gray-700"

          <div class="mt-1 rounded-md shadow-sm">
              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-purple focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"

        <div class="mt-6">
          <span class="block w-full rounded-md shadow-sm">
              class="rounded-full tracking-wider  bg-gray-800 hover:bg-gray-900  text-white font-bold text-center py-3 px-8 text-sm uppercase transition transform duration-200 focus:outline-none w-full"
              Send Reset


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.