DEV Community: Mohammad Kareem

Authorization In Laravel - A Beginner's Guide

Mohammad Kareem — Thu, 12 Sep 2024 22:50:43 +0000

Mastering Authorization in Laravel: Gates vs. Policy Classes 🚪🔐

In a modern web application, controlling who can access or modify resources is crucial. For instance, in a blog application, you might want to ensure that only the owner of a post can edit or delete it. Laravel offers two elegant ways to handle authorization: Gates and Policy Classes. This guide will walk you through both methods, showing you how to protect your resources and ensure your application’s security.

Gates in Laravel 🚪

Gates provide a quick and straightforward way to handle authorization using closures. They are perfect for simple authorization checks and are defined in the AuthServiceProvider.

Setting Up a Gate

Let’s define a gate to ensure that only the post owner can update or delete a post:

Define the Gate: Open AuthServiceProvider and add your gate definitions:

// app/Providers/AuthServiceProvider.php

use Illuminate\Support\Facades\Gate;
use App\Models\Post;

public function boot()
{
    $this->registerPolicies();

    Gate::define('update-post', function ($user, Post $post) {
        return $user->id === $post->user_id;
    });

    Gate::define('delete-post', function ($user, Post $post) {
        return $user->id === $post->user_id;
    });
}

Applying the Gate: Use the gate in your controller methods to enforce the authorization logic:

// app/Http/Controllers/PostController.php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Gate;
use App\Models\Post;

public function update(Request $request, Post $post)
{
    if (Gate::denies('update-post', $post)) {
        abort(403, 'You do not own this post. 🚫');
    }

    // Proceed with updating the post
}

public function destroy(Post $post)
{
    if (Gate::denies('delete-post', $post)) {
        abort(403, 'You do not own this post. 🚫');
    }

    // Proceed with deleting the post
}

Pros and Cons of Gates

Pros:

Simplicity: Quick to set up with minimal code. ⚡
Ideal for Simplicity: Perfect for single-resource applications or straightforward scenarios. 📝

Cons:

Scalability: Can become cumbersome and difficult to manage as your application grows. 📈
Maintenance: May become messy if not well-organized. 🧩

Best Use Case: Small applications or simple use cases where a quick authorization check is needed. 🚀

Policy Classes in Laravel 🛡️

Policy Classes offer a more structured and scalable approach to handling authorization. They provide a clear way to manage complex authorization rules and keep your code organized. Policies are particularly useful when working with resource controllers that include the standard CRUD operations: index, create, edit, update, and destroy.

Creating and Using a Policy

Generate the Policy: Create a policy class using Artisan:
```
php artisan make:policy PostPolicy
```

Define Policy Methods: Open the generated policy class and add methods to handle authorization for each action:

// app/Policies/PostPolicy.php

namespace App\Policies;

use App\Models\User;
use App\Models\Post;

class PostPolicy
{
    /**
     * Determine if the user can view the list of posts.
     *
     * @param User $user
     * @return bool
     */
    public function viewAny(User $user)
    {
        // Example logic to allow viewing posts for authenticated users
        return true;
    }

    /**
     * Determine if the user can create a post.
     *
     * @param User $user
     * @return bool
     */
    public function create(User $user)
    {
        return true;
    }

    /**
     * Determine if the user can update the post.
     *
     * @param User $user
     * @param Post $post
     * @return bool
     */
    public function update(User $user, Post $post)
    {
        return $user->id === $post->user_id;
    }

    /**
     * Determine if the user can delete the post.
     *
     * @param User $user
     * @param Post $post
     * @return bool
     */
    public function delete(User $user, Post $post)
    {
        return $user->id === $post->user_id;
    }
}

Using the Policy: Apply the policy methods in your controller actions:

// app/Http/Controllers/PostController.php

use Illuminate\Http\Request;
use App\Models\Post;

public function update(Request $request, Post $post)
{
    $this->authorize('update', $post);
    // Proceed with updating the post
}

public function destroy(Post $post)
{
    $this->authorize('delete', $post);
    // Proceed with deleting the post
}

Pros and Cons of Policy Classes

Pros:

Organization: Provides a clean and organized way to handle complex authorization logic. 📂
Maintainability: Easier to manage and maintain as the application grows. 🛠️
Framework Support: Leverages Laravel’s built-in framework support for consistent authorization. 🔧

Cons:

Initial Setup: Slightly more setup compared to gates. ⚙️
Complexity: May be overkill for very simple authorization scenarios. 🎢

Best Case Scenario: Ideal for applications with complex authorization requirements or when aiming for clean, maintainable code. 🌟

Summary

Both Gates and Policy Classes in Laravel offer powerful ways to handle authorization. Gates are excellent for quick, simple checks, while Policy Classes provide a structured approach for managing complex scenarios, especially in resource controllers with methods like index, create, edit, update, and destroy. Choose the method that best fits your application’s needs and enjoy a secure, well-organized codebase! 🚀🔐

🎉 Celebrating the Launch of Justablog: New Features & Exciting Updates! 🚀

Mohammad Kareem — Tue, 03 Sep 2024 20:49:06 +0000

Hello fellow nerds! 🌟

I’m overjoyed to announce the launch of Justablog, my latest Laravel-powered microblogging platform! This project has been a labor of love, and I’m excited to share it with you all. To top it off, we’ve just rolled out some amazing new features that will enhance your experience!

🚀 What is Justablog?

Justablog is a modern microblogging platform designed to offer a sleek, user-friendly experience while providing powerful functionality. Built with Laravel and styled using Tailwind CSS, it’s a space for sharing stories, engaging with content, and connecting with others.

🛠️ Key Features of Justablog

✨ User Authentication: Effortlessly register, log in, and manage your profile.
📝 Post Creation: Create and publish posts with ease.
💬 Comments: Engage in conversations directly on posts.
❤️ Likes: Show appreciation with a simple like button.
🌑 Dark Mode: Enjoy a sleek dark mode interface.
📱 Responsive Design: A design that looks great on any device.
🔍 Search Functionality: Find posts quickly by title.
👥 Follow/Unfollow System: Keep track of your favorite content creators

🌟 New Features

We’ve recently introduced some fantastic features that I’m particularly excited about:

🔹 User Profiles

Customize your profile to make it truly yours! With new options for profile pictures, cover photos, and bios, you can express your unique personality and make a memorable impression. 🖼️🎨

🔹 Follow/Unfollow System

Stay updated with your favorite users and easily manage your connections with our new follow/unfollow feature. This allows you to curate your feed and stay connected with the content that matters most to you. 🌟🔄

📂 Explore Justablog on GitHub!

Interested in exploring the code, contributing, or just taking a closer look? Check out the Justablog repository on GitHub:

🔗 Justablog on GitHub

Feel free to dive into the code, report issues, or suggest features. I’d love to hear your feedback and see how you might contribute to making Justablog even better!

🙌 Get Involved

Your support is invaluable! Here’s how you can help:

Contribute to Development: Browse the codebase and help us improve Justablog.
Provide Feedback: Share your thoughts and suggestions on the new features.
Spread the Word: Let your network know about Justablog and invite others to join our growing community!

Happy coding and blogging! 🚀💪

Baby Steps Learning Laravel

Mohammad Kareem — Fri, 30 Aug 2024 18:31:04 +0000

Welcome Back, Devs! ✨

In this chapter of our Laravel journey (remember, I’m learning as I write these articles, so this will be one of the most realistic tutorial series you can find!), we’ll dive into our Laravel project. We’ll explore the project structure, get familiar with migrations, and break down the MVC architecture in the simplest way possible.

📅 Today’s Agenda:

Exploring Our Project Structure 🗂️
- Understand the directory layout and navigate through it smoothly.
Setting Up a Database & Learning About Migrations 🛠️
- Configure our database and get to grips with migrations.
Understanding MVC & Creating Some MVC Elements 🔄
- Learn how the MVC architecture works and tinker with migrations.

So, What Are All These Directories Doing? 🤔

Upon your first launch of VSCode in your newly created Laravel project, you might find the directory structure a bit intimidating. Here's a quick overview of what each key directory does:

app/: Contains application logic (controllers, models).
resources/views/: Where your Blade templates live.
routes/: Contains route definitions.
config/: Configuration files for various aspects of Laravel.
database/: Migrations, seeders, and SQLite database (if used).
public/: Entry point for web requests, including assets like CSS and JS.

Good News: You don’t need to know everything right now. Keep this cheatsheet handy!

Bad News: You'll need to learn about these as the series progresses. I'll add "knowledge checkpoints" to remind you of their purposes.

Viewing Your Web App in the Browser 🌐

Let’s get a taste of Laravel! Open your terminal and type:

php artisan serve

Then, head over to your browser and visit localhost:8000. You should see something like this:

Important: Ensure your server and DB are running (if using XAMPP, as explained in my previous article).

What Is Artisan? 🔧

If you're used to JavaScript, think of php artisan serve as similar to npm run dev.

Artisan is a powerful command-line tool that comes with Laravel, making various tasks easy and quick. The serve command starts a local development server. We'll use Artisan more as we progress, so don’t worry too much about it right now.

Configuring Our Database 💾

A web app is essentially a wrapper for a database. Laravel supports various databases:

SQLite: Default, zero configuration—ideal for small to medium projects.
MySQL: For larger projects, though SQLite will work for most cases.

Setting Up SQLite

You don’t need to configure it; it’s the default database.

Setting Up MySQL (if using XAMPP)

Edit your .env file to uncomment the MySQL configuration:

SQLite Config

MySQL Config

The .env file is like a switchboard for toggling configurations on and off.

🔍 Sneak Peek into MVC: Baby Examples 🍼

Before diving deeper into MVC in future articles, let’s get a quick overview with some baby examples.

What is MVC? 🤔

MVC stands for Model-View-Controller. It’s a design pattern that separates concerns in your application:

Model: 🗃️ Manages the data and business logic.
View: 👁️ Displays data to the user.
Controller: 🎛️ Connects the Model and View, handling input and data flow.

🛠️ Baby Example: A Simple "Hello World" App

1. Model

Here’s a Greeting model for storing messages:

// app/Models/Greeting.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Greeting extends Model
{
    protected $table = 'greetings';
    protected $fillable = ['message'];
}

2. View

The view displays the greeting message:

<!-- resources/views/greeting.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Greeting</title>
</head>
<body>
    <h1>{{ $message }}</h1>
</body>
</html>

3. Controller

The controller fetches the greeting message and passes it to the view:

// app/Http/Controllers/GreetingController.php
namespace App\Http\Controllers;

use App\Models\Greeting;
use Illuminate\Http\Request;

class GreetingController extends Controller
{
    public function show()
    {
        $greeting = Greeting::first();
        return view('greeting', ['message' => $greeting->message]);
    }
}

How It All Works Together

Model: Manages data (Greeting class).
View: Presents data (greeting.blade.php).
Controller: Connects Model and View (GreetingController).

In this setup:

The Model handles the data.
The View presents the data.
The Controller connects the two.

In future articles, we'll dive deeper into each component and explore more complex examples. Stay tuned! 🚀

Setting Up A Development Environment For Laravel

Mohammad Kareem — Wed, 28 Aug 2024 17:46:10 +0000

🚀 Setting Up Your Laravel Development Environment on Windows 🖥️

Hey Devs! 👋

Welcome to my new series where I’ll be diving into the world of Laravel! 🎉 As I’m learning Laravel myself, I’m excited to share the knowledge and insights I’ve gathered so far. My goal is to help you break into Laravel development smoothly and efficiently. 🌟

I believe in the power of shared learning, so this series will not only guide you through the setup but also evolve over time. I might revisit and improve upon the content based on new discoveries or feedback. Who knows? We might uncover even better practices together! 🚀

The end goal of this series is to build a beautiful job board where users could submit job postings, it's packed with features and will cover many key concepts like MVC architecture, authentication, authorization, policies, styling and templating and more!!

With all that being said it's time to dive into the world of Laravel on a Windows machine, Whether you're starting fresh or setting up a new project, this guide will walk you through the essentials of getting your Laravel development environment up and running. Let’s get started! 😎

🌟 But why Choose Laravel?

Laravel is your gateway to rapid, robust, and modern web development. 🚀 Here's why it’s a game-changer:

Elegant Syntax: Laravel’s syntax is clean and expressive, making coding a joy and boosting productivity.

Built-in Tools: From authentication and routing to caching and sessions, Laravel comes with a suite of tools that save you time.

Active Community: Laravel boasts a vibrant community and extensive documentation, so help is always at your fingertips.

Scalability & Security: Laravel provides powerful features to scale your apps and keep them secure.

In a nutshell, Laravel empowers you to build high-quality applications quickly and efficiently. Why wait? Dive in and see the magic for yourself! 🌟 ( literal black magic, the framework is just that inelegant and knows what the dev wants )

1. 🛠️ Download and Install XAMPP

XAMPP is your go-to solution for setting up a local server environment. It includes Apache, MySQL, and PHP—all the goodies you need to run Laravel.

Download XAMPP: Head over to XAMPP’s official website and grab the latest version for Windows.
Install XAMPP: Run the installer and follow the prompts. Make sure Apache and MySQL are selected during installation as these are crucial for Laravel.

2. 📦 Install Composer

Composer is a powerful dependency manager for PHP that Laravel relies on. Here’s how to get it:

Download Composer: Visit Composer’s website and download the Composer-Setup.exe file.
Install Composer: Run the installer and follow the instructions. During setup, ensure that the installer finds the PHP executable from your XAMPP installation.

3. 🚀 Create a New Laravel Project

Now that you have XAMPP and Composer ready, it’s time to create your Laravel project!

Open Command Prompt: Navigate to where you want to create your Laravel project.
Run Composer Command: Execute the following command to create a new Laravel project:

  composer create-project laravel/laravel my-laravel-app

Replace my-laravel-app with your desired project name ( job-board in our case )

4. 🌟 Setting Up Your Environment

Once your Laravel project is created, you’ll need to configure a few things:

Navigate to Your Project Directory: Use cd my-laravel-app to go into your project directory.
Run Laravel Development Server: Start the built-in Laravel server by running:

  php artisan serve

This will start a local development server at http://127.0.0.1:8000.

quick note: make sure that your server and db are running by pressing start on your xampp control panel for your server and db

5. 🔄 Additional Tips

Database Configuration: Open .env in your Laravel project and configure your database settings to match your MySQL setup in XAMPP.
Check Dependencies: Regularly update your project’s dependencies by running composer update.

🎉 You’re All Set!

Congratulations! 🎊 You’ve successfully set up a Laravel development environment on Windows. Now you're ready to start building amazing applications!

Feel free to drop any questions or share your experiences in the comments.
Happy coding! 💻🚀

🚀 Introducing Ticketly: A Simple Ticketing System Built with Laravel 🎟️

Mohammad Kareem — Mon, 26 Aug 2024 14:23:40 +0000

Hey DEV Community! 👋

I’m thrilled to share my latest project: Ticketly – a straightforward yet powerful ticketing system built with Laravel. This has been an incredible learning experience and a chance to dive deep into Laravel and modern web development tools. 🌟

What is Ticketly?

Ticketly is a web application designed to streamline the management of support tickets within an organization. It features functionalities for both regular users and administrators, making ticket management efficient and user-friendly.
Key Features

Project Features

For Employees / Regular Users:
- Create new tickets
- View and manage their own tickets
- Delete their own tickets
For Administrators:
- Update ticket statuses
- Open
- Processing
- Closed
- An email notification is sent when an admin updates or deletes a ticket

Tech Stack

Backend & Frontend: Laravel (Blade Templating Engine)
Database: MySQL
Authentication: Laravel Breeze
Styling: Tailwind CSS
Email: Mailtrap (for testing)

What I Learned

This project allowed me to explore several key Laravel features and concepts, including:

Routing & Controllers: Handling HTTP requests and application logic.
Authentication: Implementing user authentication with Laravel Breeze.
Authorization: Managing access with policies and middleware.
Eloquent ORM: Interacting with the database using Eloquent.
Blade Templating: Building dynamic views with Blade.
Tailwind CSS: Creating modern, responsive designs with utility-first CSS.
Email Notifications: Sending notifications using Mailtrap.

Highlight: Filter by Priority

One of the exciting features implemented is the ability to filter tickets by priority. This functionality allows users to view tickets based on their urgency, improving support ticket management and resolution efficiency.

Explore the Project

You can check out the project and its codebase on GitHub. I’m excited to hear your feedback and suggestions!

Future Plans

I'd like to take the opportunity to announce an upcoming series on my blog here to teach you guys Laravel in order to be able to build similar projects and even better projects so stay tuned for episode 1!

Happy coding! 🎉

#Laravel #WebDevelopment #OpenSource #TicketingSystem #PHP #MySQL #TailwindCSS #EmailNotifications #Coding #Programming #DevCommunity

Learn Enough Regex Without Losing Your Mind

Mohammad Kareem — Sat, 17 Aug 2024 09:37:48 +0000

I fully understand that Regex is such a complex and borderline witchcraft topic to the average dev ( myself included ) but trust me it's extremely powerful and can solve issues in some cases so i decided to put together this simple blog to try my best to teach you enough regex without losing your mind :)

REGEX BASICS FOR THE CURIOUS OF SOUL

So to be completely transparent with you if i could write 20 lines of code in order to avoid writing a regex i'd do it BUT it's still useful in some use cases and tbh a valid solution so let's learn the basics and enough to work with regex

this blog will be programming language agnostic as i won't use any as an example but stick to the syntax itself rather than using it in a programming language

WHAT IS REGEX AND WHY DO I NEED IT

Regex is text pattern matching that helps us match pieces of text according to a pattern we specify using special operators, so arranging those regex operators in a way to do any text processing task you could imagine

Examples include : email validation, phone number validation, postal code validation, credit card validation, etc etc……

HOW CAN I PRACTISE MY REGEX ?

we’re gonna use this online tool to help us test and visualize our regex in real time, it’s an amazingly great tool to learn since we can see our mistakes as well as finding out why such pattern worked

We’re gonna build few examples to learn as much regex as we need to start and it’ll be just enough for now until we run into super complex stuff

phone number example
email example
price tag example
DD/MM/YYYY date format example

OUR CHEATSHEET FOR THIS TUTORIAL

To stay focused we're gonna cover these operators as i believe they're more than enough to wrap your head around regex but it goes without saying that regex can get pretty complicated but we're only interested in pretty basic pattern matching stuff so here's our little cheatsheet :

^ beginning of a line
$ end of the line
[] grouping — basically means “ranges” like [a-z], [0–9]
{} means how many times you’d like this pattern to occur
? one or zero times aka optional operator
+ at least one or more times, basically means i don’t care how many time this pattern occurs
* zero or more times
\w will match every letter, number and underscore
\d will match single digits only
\s space
\t tab
/ escape special characters — in case we wanna match an actual dollar sign for example

REGEX HELLO WORLD

So the most basic regex we can write is the text itself ! suppose you wanna extract a name for example “Bridget”, you can literally write Bridget so let’s jump to our online tool and find out

USING MORE OPERATORS

Don’t panic 😄 there’s nothing fancy going on at all there, so our pattern now says “start the line, find Bridget, close the line”, as discussed earlier the carrot ^ means the line begins with……everything that follows and the $ means the end of the line, so again, find me this pattern where the line starts with the word Bridget and the line ends

INTRODUCING GROUPS TO MATCH MORE PATTERNS

OK so now our regex only matches this one word…..but what if we wanna match more ? We’re not gonna write every name are we 😂

For that we’re gonna use the square brackets to use grouping, which means find me a pattern that consist of this group of letters or numbers or special characters, so let’s write a regex that simply matches any given first name then we’ll extend it to include more words separated by spaces basically to simulate a full name

Now pay attention to the visualization and how we now have two “blocks” basically, it simply says, find me this pattern where there is a small or a capital letter infinitely followed by a space followed by the same pattern for the block prior

quick note, English is my second language so my explanation can be a little misunderstood or inaccurate so please pardon me, I’ll try to explain as simple as possible and provide visuals

USING REGEX TO VALIDATE A US PHONE NUMBER

Now that we know some regex let’s try to validate a phone number, so a US phone number consists of 3-digit area code followed by another 3 digits that represent a central office, followed by 4digits that represent the subscriber number so it should look like 202–555–0160 ( a fake number btw ) and we’ll include the dashes too

See how easy it is now :) isn’t regex so much fun so far 😍, notice how we simply added the dashes as they don’t represent anything in regex so they’re treated literally as they look, you notice how we so far “draw” how our data should look like ? I really hope it clicked :)

EMAIL VALIDATION USING REGEX

Now we’re gonna do a classic regex which is validating an email address but bear in mind that this is pretty basic as i imagine real production level regex patterns will be far more complex but we’re just tinkering around for fun :)

This example will demonstrate how can we add more than just numbers and letters to our group

EXTRACTING A PRICE FROM A WEBPAGE WITH REGEX

Ok now a more fun example ( hopefully so ) so let's say you're scraping amazon or whatever website and you needed to extract a price for something, well regex makes this extremely easy plus we'll get to learn about character escaping since $ is already a regex operator

translation is: it begins with a digit (0-9) followed by a dot ( yes we had to escape that too ) followed by another number and lastly a dollar sign

But you'll notice that our regex only applies to prices with a floating point aka not whole numbers like 14$ so how do we fix that ?

USING THE ? OPERATOR TO INDICATE THE OPTIONAL PRESENCE OF A PATTERN

To address the mentioned issue above well use the ? operator to signal to our regex expression that the second half of the price is optional in case we run into whole numbers so let's quickly fix our regex

FINAL NOTES

As in anything software related, you NEED to practise more to the point where the concept becomes natural to you and a thing of a habit so use the online tool i mentioned above and you can always learn more and if you find yourself in need to learn more regex then go for it cause the best way to learn something besides practise is to actually use the new knowledge in solving your own issues

Thank you so much if you've made it this far and i pray to God i can always bring you the most useful of content and be able to give back to the online community that made me who i am today

.Env Files For Tech Noobs

Mohammad Kareem — Wed, 14 Aug 2024 20:10:20 +0000

When deploying your web app / project online, the last thing you’d want is to have sensitive information leaked such as some auth tokens or api keys etc etc
So this begs the question : how can i secure sensitive data my program needs ?
This blog will explore environment variables, what are they ? when do i need them ? how can i create them ? how do i use them ?

ENVIRONMENT VARIABLE 101

Now as well know we use variables all the time when we are writing any piece of software, variables are just boxes to store pieces of data inside but still wth is an environment variable ?

Environment variables are essentially variables required needed by your environment ( duh lmao ) aka your operating system

Think of them as "switches" or basically pieces of configuration your system needs to behave accordingly

An example of an environment variable is PATH on Windows which essentially informs the OS where the executables at

And yes you can easily create your own environment variables rn rn

TIME TO CREATE SOME ENVIRONMENT VARIABLES FELLAS

Ok so let's see how to set up our own environment variables (drinking game for how many times i typed that LMAO ) on Windows which is actually pretty simple so please lads pop up cmd with admin privileges and type along

setx MY_CAT "simsim"

So what's happening here ? Well the syntax is simple, we use setx to set environment variables followed by our variable name which is preferably in all uppercase then we specify the value ( yes i have a cat named simsim ;) )

Now to print out our newly created env var ( yes i'm sick of typing it out ) we simply say

echo %MY_CAT%

In the context of web development / programming

Now that we've established the basic idea behind env vars it's time to actually use them and see why would we need them in our projects

Often times your project will reach out to external APIs and web services, those service providers need those tokens / API tokens to verify who's consuming their API as well as implement some rate limiting or such, in addition to those you might have your database credentials / s3 credentials / etc, and trust me you don't want any of these to be leaked by accident

This is where environment variables come into play, we create a file named .env and we store those important credentials in it and then we can access them in our code regardless of your project tech stack, this stuff just works like that

SO JEFF LEAKED HIS DISCORD BOT TOKEN 😱

So in this imaginary ( yet very much possible ) scenario we'll have a look at our dear friend Jeff and how did he make a terrible mistake cause he didn't know about the magic of environment variables

So let’s say Jeff has just built the sickest discord bot built with cutting edge technology and powered by the finest AI models.....to tell the weather using node.js and he’s excited to show it off on his github

But few hours later……. the bot doesn’t return the current weather as it should, hmmm quite odd isn’t it? Jeff goes to the api provider website to check his dashboard and see how much of daily quota he used and……..IT’S GONE BUT HOW DID IT HAPPEN

SO HOW TO NOT BE LIKE JEFF

Trust me you don’t wanna be like Jeff, you’ve got to protect your api keys or auth tokens or any piece of authentication info that should only be used by YOU and ONLY YOU so how do we do that ?

In this example we’ll assume we’re building some node.js app because you can’t really hide your credentials on the front end, all it takes is checking the network tab and you can see the request headers and bam you’re screwed ( real )

Now let's create our .env file and see how do we store those tokens and stuff

I will use node.js as an example despite being a Laravel lover

API_KEY="SUPER SECRET API KEY"
CONSUMER_KEY="some other stuff here"
OTHER_VERY_SECRET_TOKEN="blah blah"

As you can see the syntax is pretty simple, BUT REMEMBER the variable name is very very preferred to be in all uppercase and don't leave any space before and after the = sign

ACCESSING THOSE VARIABLES IN OUR CODE

Now back to our sick discord bot project that'll be acquired by Elon Musk, so now that we've set up our environment variables it's time to actually use them in our project right ? Well in node.js that's pretty simple all you gotta do is install a package named dotenv because for some reason only God knows, process.env doesn't just work out of the box so let's do that now

npm i dotenv --dev

Now in our node.js program let's just slap this bad boy in

require('dotenv').config();
let api_key = process.env.API_KWY;
let api_key = process.env['API_KEY']; // same shit

and voila ✨ you're now a full stack web dev ( kidding )

EXTRA LAYER OF SECURITY FOR THE GIT NERDS

As we all know you're not a real FAANG material until you use a version control utility ( mostly Git ) and if you're worked with Git before you'd know that it's a piece of software to enable to push your project entirely to Github or Gitlab to allow collaborations with other interested devs

Now this begs the question if i'm sharing my project files with the world including but not limited to.....my env file am i not gonna end up like Jeff ? and to answer your question...yes pretty much

To prevent you from being Jeff'ed let's talk about something called ✨.gitignore✨ files and don't be intimidated by how vague that looks

So what is that, you might ask ? Well a .gitignore tells your version control to ignore the mentioned files inside it ( no shit )

Now create one and paste this in

.env

Yea fellas that's pretty much it, always store sensitive data in your .env file and don't forget to include it in your .gitignore file if you're using Git for version control

Thanks a lot for making it this far and i am excited to share more web dev / tech content with you on Dev.to since i migrated from Medium so expect more content coming so soon PLUS original content ofc focused entirely on Laravel and as always have a lovely $PART_OF_THE_DAY