This will ask few question through wizard. Answer them and proceed for next step.
Now we need to configure Apache server to use .key and .csr certificate files from home directory. Apache main configuration file located at /etc/apache2/sites-available/000-default.conf file. Open the file using nano editor and change file.
<VirtualHost *:443>
ServerAdmin admin@yourdomain.com
DocumentRoot /var/www/html
ServerName Domain name (Ex - test.com)
ServerAlias www.yourdomain (www.test.com)
SSLEngine on
SSLCertificateFile /etc/apache2/ssl/c09fdeafb99483d9.crt (path from crt file which generate from godaddy (.crt file))
SSLCertificateKeyFile /etc/apache2/ssl/bsstgulm.key (path from key file when generate the csr for domain)
SSLCACertificateFile /etc/apache2/ssl/gd_bundle-g2-g1.crt path from crt file which generate from godaddy (.crt file))
<Directory /var/www/html>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerName Domain name (Ex - test.com)
ServerAlias www.yourdomain.com (www.test.com)
Redirect permanent / https://www.yourdomain.com
</VirtualHost>
In Terminal go to this /etc/apache2/ path and run the below command:
apache2ctl configtest
a2enmod ssl
Lastly you will need to restart Apache server.
sudoservice apache2 restart
Now your domain will be ssl certificate installed. I hope this article will help you.
In this article, we will discuss“How to make Vue Js Reset Password With Laravel API”. In our previous article on this series, you will learnLaravel JWT AuthenticationandVue Js application setup with Vue Auth and Laravel JWT Auth. I will recommend you to read out both of the previous parts for better understanding. You can skip those if you are looking only for the specific User Reset Password functionality using Laravel API’s.
Handle Password Reset Request
We are using our “AuthController” to handle password reset functionality. Add the following traits to our Authentication Controller.
After that, you need to add the following function which handles the notification mail. End user receives a mail on his/her email. Where they click on the reset link, then the user clicks and redirect to our application to reset the password.
/** * Send password reset link. */ public function sendPasswordResetLink(Request $request)
return $this->sendResetLinkEmail($request);
Note that, sendResetLinkEmail method does not return JSON response for our API. Because it’s defined for web base functionality so we need to override the response for our API.
The response is manage by sendResetLinkResponse and sendResetLinkFailedResponse function. You can found these functions in the SendsPasswordResetEmails trait.
Add the following function in your authentication controller.
/** * Get the response for a successful password reset link. * * @param \Illuminate\Http\Request $request * @param string $response * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse */ protected function sendResetLinkResponse(Request $request, $response)
You will found the newly generated notification class at “app/Notifications”.
We need to extend the “Illuminate\Auth\Notifications\ResetPassword” and override the “toMail” function. After updating all the code notification class looks like below, you can update your “MailResetPasswordNotification.php” with following code snippet.
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable; use Illuminate\Notifications\Notification; use Illuminate\Contracts\Queue\ShouldQueue; use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Auth\Notifications\ResetPassword;
class MailResetPasswordNotification extends ResetPassword
use Queueable;
/** * Create a new notification instance. * * @return void */ public function __construct($token)
parent::__construct($token)
/** * Get the notification's delivery channels. * * @param mixed $notifiable * @return array */ public function via($notifiable)
return ['mail'];
/** * Get the mail representation of the notification. * * @param mixed $notifiable * @return \Illuminate\Notifications\Messages\MailMessage */ public function toMail($notifiable)
$link = url( "/reset-password/".$this->token ); return ( new MailMessage ) ->subject( 'Reset Password Notification' ) ->line( "Hello! You are receiving this email because we received a password reset request for your account." ) ->action( 'Reset Password', $link ) ->line( "This password reset link will expire in ".config('auth.passwords.users.expire')." minutes" ) ->line( "If you did not request a password reset, no further action is required." );
/** * Get the array representation of the notification. * * @param mixed $notifiable * @return array */ public function toArray($notifiable)
return [ // ];
In this notification class, I’m using the ResetPassword trait. Here, I override the toMail function where we use our Vue Js app URL to handle the reset password form. In this URL we are sending a unique token. A token is mandatory to add in this mail otherwise the notification sending is totally meaningless.
To finalize our notification, we need to update our User Model. Please check the below mention code snippet, and add in your User Model.
/** * Override the mail body for reset password notification mail. */ public function sendPasswordResetNotification($token)
// handle reset password form process Route::post('reset/password', 'AuthController@callResetPassword'); ... ); );
Reset Password
As per the route, which handles the reset password process. I’m creating a “callResetPassword” method in the AuthController and make sure this function can be accessed by unauthenticated users. So the user can easily process the reset password request.
/** * Handle reset password */ public function callResetPassword(Request $request)
return $this->reset($request);
This function calls the reset method, this method sets the new password, save the user, set a different remember token for the user. But, we are making this functionality for the Vue Js and using JWT authentication in our API so we don’t need to store a remember token. Check the following resetPassword method and add this in your controller.
/** * Reset the given user's password. * * @param \Illuminate\Contracts\Auth\CanResetPassword $user * @param string $password * @return void */ protected function resetPassword($user, $password)
If you face issues to use PasswordReset and Hash in your controller. Then add the following code snippet in your AuthController before the start of your controller class.
use Hash; use Illuminate\Auth\Events\PasswordReset;
After that, we need to manage the response. Because as per our API, we need a JSON response. But, the default method response is not in JSON format so we need to override the response method for our API’s.
Add the following functions in your AuthController to override the reset password response.
/** * Get the response for a successful password reset. * * @param \Illuminate\Http\Request $request * @param string $response * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse */ protected function sendResetResponse(Request $request, $response)
Here I’m creating two routes, first for a reset link request form and second for processing a reset password form. So open your “resources/js/router.js” and add the following routes.
As per the first route, I’m creating a component “ForgotPassword.vue” at “resources/js/page” directory. In this component, we create a form where the user fills there registered email id and request the reset link.
In the above ForgotPassword.vue component, I’m using the API which sends an email to the users who want to reset the password. The user needs to click on the link which redirects a user to our second route. Where the user has to enter the new password for reset.
I’m using mailtrap to test email notifications. It’s easy to add in your Laravel application. You just need to create an account on mailtrap then add your mailtrap credentials in your “.env” file. After this, you will receive all your emails on your mailtrap inbox.
As per the screenshot, when you click on the Reset Password button then user redirect to our application where he/she able to reset there password.
Create Forget Password Request Form
As per the second route, I’m creating a component “ResetPasswordForm.vue” at “resources/js/page” directory. In this component, we create a form where the user fills there new password then submit the form.
As per our email notification mail, you see URL contains the unique token. And we send this token with our form parameters to the server using API. After that our API handle this request and update the user password.
Conclusion
In this article, we are discussing “Vue Js Reset Password With Laravel API”. I’m trying to explain each of the steps which require to implements Reset Password feature in Vue Laravel application. Hope this article will helps you in your development. We will discuss more on Laravel and Vue Js in our future articles. Please feel free to add comments if any query or you can send your feedback 😉
See https://github.com/creationix/nvm#install-script.
Tips And Tricks
$ nvm ls-remote # lists all of the available versions of NodeJs & iojs
$ nvm ls # list locally installed version
$ nvm install 0.12.3 # install the version 0.12.3 (see ls-remote for available options)
$ nvm use 0.12.3 # switch to and use the installed 0.12.3 version
$ nvm which 0.12.2 # the path to the installed node version
$ nvm current # what is the current installed nvm version
$ nvm alias default 0.10.32 # set the default node to the installed 0.10.32 version
$ nvm --help # the help documents
