Creating a login system with Jetstream & Livewire

For this project I will be using Jetstream and Livewire to create a killer login system. This process couldn't be simpler, only requiring 3 lines of code.


composer require laravel/jetstream

php artisan jetstream:install livewire

npm install && npm run dev


and voila! a working authentication system! but let's make some personal tweaks..



Perfect...






When signing up to Reddit.com, you are asked for your name AND username, which is not available out the box with livewire, so we must adapt!

Firstly, I added a new field in the Livewire's register.blade.php form to take in 'username'. The issue now being that Reddit does not allow spaces in their usernames.

A quick bit of validation in Fortify's 'CreateNewUser' action using the argument 'alpha_dash' means that usernames may be alpha-numeric and also contain dashes and underscores.




And make sure to persist these changes below!

At this point, the form appeared to be displaying correctly, and validation was functioning, not allowing any spaced usernames, but the username was not persisting to the database.

Being very confused - I started browsing all the files Livewire provides for Authentication, until I had a peek in the User model. 

So, the User model provided has a technique which is new to me, in which all the 'fillable' fields are stated. With some research, this technique is that of taking privacy measures for data, so that the fields that are 'mass assignable' are stated. a counterpart to this is stating the 'guarded' fields - which means the fields which are not assignable (such as user_id, or user_type) so that no malicious user could 'make' themselves an admin or such.

Anyway, this had to be changed so that 'username' is fillable.

we can now store and access the users username with {{$user->username}}

Handy for the navbar:



A substantial start!


before we tackle authorisation and start uploading content to the site, we must go deeper in to the weddit-verse... 


by creating...a subweddit




Comments

Post a Comment

Popular posts from this blog

Validation

Image
validation, both serverside and clientside, is essential  for a satisfactory user experience, and for security.  This application makes use of several forms, so it is important that the site be completely tamper-proof. Thankfully, Laravel takes helps the cause, with the @csrf tag, which prevents csrf attacks, or cross-site request forgery. (explain this). validation on the registration is handled largely by the livewire auth package, the only tweak made is validation for the username, which was covered in the auth blog post. which leaves 5 forms to validate: create subweddit create post edit post create comment create reply Client side, all of the validation can be handled by laravel's @error directive, which will quickly determine if there is a validation error in an attribute. The message can be displayed by calling the array $errors. With our Bulma framework, we can make things look a little prettier for the user by changing the form border to red and displaying the red err...
Read more

Views and Policies

Image
Although maximum functionality is achieved by being a logged in user, it is important to think of guest users browsing the site. Baring that in mind lets run through the abilities guests and users: Guest: Home feed showing most recent posts from all subweddits view subweddit and contents view post and comments sign up User: Log in Personalised home feed Create subweddit Follow Subweddit Create Post Post comment/reply to preface: guest and user views could have been achieved in a cleaner way by creating seperate routes in web.php and stating if the user is logged in, redirect to 'logged-in' views, or otherwise 'guest' views. As my AWS instance is running on micro I chose to slim my application down so as not to overload my tiny server. Thusly, I opted for utilising @auth and @guest in the blade file. Not very clean, but effective and 'cost' efficient Starting with the index page: if the page is viewed by a guest, then display all posts from all subweddits, filter...
Read more