{"id":17496,"date":"2020-08-19T14:22:25","date_gmt":"2020-08-19T14:22:25","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17496"},"modified":"2022-04-28T09:15:15","modified_gmt":"2022-04-28T09:15:15","slug":"user-registration-and-login-system-in-laravel","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/user-registration-and-login-system-in-laravel\/","title":{"rendered":"User Registration And Login System In Laravel"},"content":{"rendered":"\n<p>Laravel provides built-in user registration and login system. Most of the developers are not aware of this built-in system (I was also one of them). When I came to know about this feature, I was surprised. It saves a lot of time from building a login and registration system from scratch.<\/p>\n\n\n\n<p>In this article, we study the user registration and login system in Laravel \u2013 the built-in feature provided by Laravel itself.<\/p>\n\n\n\n<p>As we all know login and registration process has below flow which usually needs to integrate.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>User creates an account<\/li><li>Confirmation link will send on user\u2019s email address<\/li><li>Once user click on confirmation link, they get activated on your system.<\/li><li>User log in to your website and can access the pages<\/li><\/ul>\n\n\n\n<p>All the above steps are covered in Laravel. You don\u2019t need to write a code in order to build this user creation system.<\/p>\n\n\n\n<p>Having said that, let\u2019s take a look at user registration and login system In Laravel<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Getting Started<\/h3>\n\n\n\n<p>For getting started, you should be ready with the Laravel project. If you don\u2019t have it then create it by running the command:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capture-2.png\" alt=\"\" class=\"wp-image-17497\"\/><\/figure>\n\n\n\n<p>Here \u2018laravel-dev\u2019 is the name of the Laravel project. The user can change this name.<\/p>\n\n\n\n<p>Next, you have to integrate Laravel authentication. Head over to the project root directory in the terminal and run the below commands one by one:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Captu2re.png\" alt=\"\" class=\"wp-image-17498\"\/><\/figure>\n\n\n\n<p>These commands will create authentication controllers like&nbsp;<code>LoginController.php<\/code>,&nbsp;<code>RegisterController.php<\/code>, etc which you will find in the&nbsp;<code>app\/Http\/Controllers\/Auth<\/code>&nbsp;directory. It also creates a views&nbsp;<code>login.blade.php<\/code>,&nbsp;<code>register.blade.php<\/code>&nbsp;under&nbsp;<code>resources\/view\/auth<\/code>&nbsp;directory.<\/p>\n\n\n\n<p>The above commands also creates a&nbsp;<code>app.blade.php<\/code>&nbsp;file under&nbsp;<code>resources\/views\/layouts<\/code>&nbsp;directory. This view is a base layout for the application. It uses the Bootstrap CSS framework but the user can customize it and change the design.<\/p>\n\n\n\n<p>Run the migration command which will create a \u2018users\u2019 table in your database.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capt15ure.png\" alt=\"\" class=\"wp-image-17499\"\/><\/figure>\n\n\n\n<p>Now if you run the Laravel project on the browser, you will see the links for login and registration form.<\/p>\n\n\n\n<p>At this stage, users can create their account and log in to the website. But as I mentioned above, before a user can access the system they should have confirmed their account.<\/p>\n\n\n\n<p>In the next step, we will see how to perform the email verification process of a user.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Email Verification<\/h3>\n\n\n\n<p>While building a registration system, when user signup you send an activation link to users. This activation link will be used to verify the user account. Once, the user clicks on an activation link then we make that user active. In other words, after verifying the account user can browse the pages of your application.<\/p>\n\n\n\n<p>Laravel provides a built-in system of the email verification process for a newly registered user. Using this system, a registered user will get an email with an activation link. Upon activating the account, the user will be able to access the system.<\/p>\n\n\n\n<p>Open the&nbsp;<code>App\\User.php<\/code>&nbsp;file and make sure \u2018User\u2019 model implements&nbsp;<code>Illuminate\\Contracts\\Auth\\MustVerifyEmail<\/code>&nbsp;contract.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/dharmu9898\/be480ecaf4fb3a19d7d113d4d10ba077.js\"><\/script>\n\n\n\n<p>How does it work? If you check the migration file, \u2018users\u2019 table contains a&nbsp;<code>email_verified_at<\/code>&nbsp;column. This column will be used to verify whether the user has activated their account or not. If the account is activated, this column should have the date and time of activation.<\/p>\n\n\n\n<p>When you run the authentication command, it creates an&nbsp;<code>Auth\\VerificationController<\/code>&nbsp;class which has logic written to send verification links and verify emails. The developer can check this file. To register the necessary routes for this controller, write the below routes in the&nbsp;<code>routes\/web.php<\/code>&nbsp;file.<\/p>\n\n\n\nAuth::routes([&#8216;verify&#8217; =&gt; true]);\n\n\n\n<p>The user can protect their routes which should be behind the login. To protect the routes, you need to apply&nbsp;<code>middleware('verified')<\/code>&nbsp;to those routes. After this, these protected routes can be accessed only by verified accounts.<\/p>\n\n\n\n<p>You can write the code to protect route as follows:<\/p>\n\n\n\nRoute::get(&#8216;profile&#8217;, function () {\n    return &#8216;<h1>This is profile page<\/h1>&#8216;;\n})-&gt;middleware(&#8216;verified&#8217;);\n\n\n\n<p>If you want to have control of where to redirect the user after verification then open the&nbsp;<code>Auth\\VerificationController<\/code>&nbsp;file. The file has the variable&nbsp;<code>$redirectTo<\/code>&nbsp;which will use for redirection. Change this route as per your requirement.<\/p>\n\n\n\nprotected $redirectTo = &#8216;\/home&#8217;;\n\n\n\n<h3 class=\"wp-block-heading\">User Login and Registration<\/h3>\n\n\n\n<p>You are now ready to test the user login and registration system. As we are dealing with the signup process, your system should be able to send an email. You can use the Gmail SMTP server to send emails.<\/p>\n\n\n\n<p>Start the local development server using the command:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capt145234ure.png\" alt=\"\" class=\"wp-image-17502\"\/><\/figure>\n\n\n\n<p>Create an account of a user on registration page here \u2013&nbsp;<em>http:\/\/localhost:8000\/register<\/em><\/p>\n\n\n\n<p>Upon submission of a form, you will get the verification link on your email as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/email-1024x636.png\" alt=\"\" class=\"wp-image-17503\"\/><\/figure>\n\n\n\n<p>Please note, Laravel allows you to log in to your account even if you did not verify the account yet. But you can\u2019t access the protected route.<\/p>\n\n\n\n<p>I have added middleware for the route&nbsp;<code>profile<\/code>. Without verifying the account if you try to visit the&nbsp;<em>http:\/\/localhost:8000\/profile<\/em>&nbsp;page, it will redirect to the&nbsp;<em>http:\/\/localhost:8000\/email\/verify<\/em>&nbsp;URL.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/not-verified-1024x258.png\" alt=\"\" class=\"wp-image-17504\"\/><\/figure>\n\n\n\n<p>Go ahead and verify your account. Check the \u2018users\u2019 table in the database and you will see\u00a0<code>email_verified_at<\/code>\u00a0column filled the date and time of activation. It means you have verified your account successfully. Now you should be able to access protected routes.<\/p>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_14222\"><iframe loading=\"lazy\"  id=\"_ytid_25204\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_14222\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Laravel provides built-in user registration and login system. Most of the developers are not aware of this built-in system (I was also one of them). When I came to know&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5201],"tags":[],"class_list":["post-17496","post","type-post","status-publish","format-standard","hentry","category-laravel"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17496"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17496\/revisions"}],"predecessor-version":[{"id":24607,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17496\/revisions\/24607"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}