Forem: Asm Raihan

🔐 Lucia Auth: A Flexible Open Source Authentication Library for the JavaScript Ecosystem! 🔐

Asm Raihan — Fri, 05 Apr 2024 11:50:55 +0000

For years, I was tired of wrestling with overly complex authentication libraries.

Building my own authentication system needed much more care than I could ever imagine. Lucia comes with a simple, flexible, and type-safe authentication library designed for Astro, Express, Next.js, Nuxt, SolidStart, SvelteKit, and more! 🚀

Why Lucia?

Unlike other third-party authentication libraries like Clerk, NextAuth, or Supabase auth, Lucia takes a different approach. It's not a one-size-fits-all solution. Instead, Lucia empowers you to create authentication tailored precisely to your app's needs. No hidden configurations or callbacks that force you into a corner.

Key Features:

✅ Own your data with full control

✅ Secure with a focus on user privacy

✅ MIT license for open development

✅ Fully typed for TypeScript lovers

How Does Lucia Stand Out?

🔹 Flexibility: Customize your sign-in forms and APIs the way you want.

🔹 Integration: Direct support for Next.js, SvelteKit, and Astro SSR.

🔹 Database Support: Adapters for MySQL, Postgres, Sqlite, MongoDB, and Redis.

🔹 Custom User Attributes: Set any user attributes, similar to Firebase custom claims.

🔹 Low-Level Control: Manage user and session data easily.

Code Example:


import { Lucia } from "lucia";

const lucia = new Lucia(new Adapter(db));

const user = await lucia.createUser("email", userEmail, {
 password: userPassword,
 attributes: {
  username: userUsername
 }
});

const session = await lucia.createSession(user.userId);
const sessionCookies = lucia.createSessionCookies(session);

Comparison with Other Libraries:

🆚 Supabase auth, SuperTokens, NextAuth: These libraries have too much abstraction for users to have control over their authentication flow. Lucia gives you the tools to craft authentication that fits your app perfectly.

Demo Repo: Check out my example repo using Lucia with Next.js and Prisma ORM: Lucia Basic Starter

If you're tired of authentication libraries that dictate how you should build your app, give Lucia a try. Explore more about Lucia in the official documentation. Have questions? Feel free to reach out on GitHub or Discord. Let's empower our apps with flexible and secure authentication together! 🌟

LuciaAuth #Security #WebDevelopment #OpenSource

Top 10 Visual Studio Code Themes for a Stylish Coding Experience

Asm Raihan — Sun, 21 May 2023 06:53:38 +0000

Visual Studio Code (VS Code) has emerged as one of the most popular code editors among developers due to its flexibility, extensive features, and a vibrant community. One of the standout features of VS Code is the ability to customize its appearance with themes. Themes not only add a touch of personalization but also enhance productivity by providing a visually pleasing and distraction-free environment. In this blog post, we will explore the top 10 VS Code themes that can transform your coding experience into a stylish and immersive journey.

10. Gruvbox:
Gruvbox is a popular retro-inspired theme that brings a nostalgic feel to VS Code. It features warm and earthy colors, reminiscent of old computer terminals and vintage design. Gruvbox offers both light and dark variants, allowing you to choose the one that suits your coding style.

09. Ayu:
Ayu is a minimalistic theme that focuses on simplicity and clarity. It offers three variants: Light, Mirage, and Dark. The Light variant provides a clean and bright interface, while the Mirage and Dark variants feature muted colors that reduce visual distractions. Ayu is well-suited for those who prefer a minimal and distraction-free coding environment.

08. Monokai Pro:
Monokai Pro is a modern take on the classic Monokai theme. It offers a wide range of customizable options, allowing you to fine-tune the colors and visual elements to your liking. With its vibrant and saturated colors, Monokai Pro provides an energetic and immersive coding environment.

07. Shades of Purple:
As the name suggests, Shades of Purple is a theme that revolves around various shades of purple. This vibrant and stylish theme offers a mix of dark and light purples, creating an eye-catching coding experience. It provides an excellent balance between aesthetics and readability.

06. Nord:
Nord is a popular theme known for its cool and calm color scheme. It features a blend of frosty blues, soothing purples, and soft grays. The overall effect is a visually pleasing and consistent environment that reduces eye strain during long coding sessions. Nord also offers variants optimized for different types of color blindness.

05. Night Owl:
If you prefer a theme that adapts to different lighting conditions, Night Owl is an excellent choice. With its deep blue background and contrasting bright colors, it provides an immersive experience for both dark and well-lit environments. Night Owl also offers semantic highlighting, which differentiates code elements based on their functionality.

04. One Dark Pro:
Inspired by Atom's One Dark theme, One Dark Pro brings a beautiful and consistent experience to VS Code. It offers a balanced combination of dark shades with vivid colors for syntax highlighting, making code elements stand out. One Dark Pro has a clean and uncluttered design, promoting focus and productivity.

03. LWS Theme:
Learn with Sumit Theme is a visually appealing theme that emphasizes readability. It features a combination of dark blue and bright yellow, which creates a high contrast environment that is easy on the eyes. LWS also offers customizations for specific languages, improving the syntax highlighting for various programming languages.

02. Material Theme:
The Material Theme brings the popular Material Design aesthetic to VS Code. It offers a clean and modern interface with vibrant colors, subtle animations, and well-designed icons. The theme provides both light and dark variants, allowing you to switch between them based on your preference.

01. Dracula:
Dracula is a beloved theme among developers for its dark and vibrant color palette. The combination of dark purple, black, and neon green accents creates a visually striking and highly readable coding environment. Dracula is easy on the eyes, making it suitable for long coding sessions.

Bonus:

Vivid Black
My custom made vs codetheme Vivid Black is now on marketplace. Vivid Black Theme offers bright color code with dark background tailored for personal preference.

Conclusion:

The choice of a VS Code theme is a personal one, as it affects your coding experience and productivity. The top 10 themes mentioned in this blog post offer a wide range of options, from vibrant and bold designs to minimalistic and calming interfaces. Experiment with different themes to find the one that resonates with your style and preferences, and enjoy a visually appealing and immersive coding journey with Visual Studio Code.

Guide to React leaflet

Asm Raihan — Thu, 04 May 2023 19:51:19 +0000

React Leaflet provides bindings between React and Leaflet. It uses Leaflet to abstract Leaflet layers and turn them into React components, not replacing Leaflet.

React-leaflet is very easy to implement. But the official documentation is a little vague to me. So here are we,

STEP - 1 // Installing React-Leaflet as dependency

npm install react-leaflet

yarn add react-leaflet

STEP - 2 // Importing components

All the components and hooks can be imported from the module entry-point:

import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'

For TypeScript only

yarn add -D @types/leaflet

STEP - 3 // Creating map component

<MapContainer center={[38.706928957217166, 35.51448175987359]} zoom={13} scrollWheelZoom={true}>
                <TileLayer

                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[38.706928957217166, 35.51448175987359]}>
                    <Popup>
                        popup <br /> message.
                    </Popup>
                </Marker>
            </MapContainer>

STEP - 4 // Adding CSS style to show map properly

  .leaflet-container{
    width: 100vw;
    height: 100vh ;
  }

You are all set. This is the basic usage of leaflet. See the official documentation for more customization. Have fun!
https://www.npmjs.com/package/react-leaflet
https://react-leaflet.js.org/docs/start-installation/
https://leafletjs.com/
https://github.com/PaulLeCam/react-leaflet

React useState and useEffect hooks explained in simple term with example

Asm Raihan — Tue, 18 Apr 2023 11:02:25 +0000

React hooks were introduced in React version 16.8. The main purpose was to make functional components more useful .
Hooks allows us to change the state of react components (useState) or performing an after effect when changes occur in component state without the need of class component.

RULES of react hooks,

1.React hooks can only be used in react functions.
2.React hooks must be called at the top level.

useState in hook in react :

First what is state in react?

A built in react object
Can be used to store data about components.
States are mutable, meaning their value can change

The useState() hook allows us to have state variables in the React functional component. It takes one argument which is the initial state and returns a state value and a function to update it.

const [count, setCount] = useState(0)
const increaseCount = () =>{
    setCount(count + 1)
};

5 common usage of useState() ,

Counter
State management.
Conditional rendering.
Toggler (ON/OFF,True/False)
Store api.

useEffect in hook in react :

What are side effects in react?

Actions which are performed with the outside world
Unpredictable because it can depend upon various things outside of react scope.

useEffect() hook accepts 2 arguments:

    useEffect(callback[, dependencies]);

Callback is a function that contains the side-effect logic. callback is executed right after the DOM update.
dependencies is an optional array of dependencies. useEffect() executes callback only if the dependencies have changed between renderings.

  useEffect(() => {
    setTimeout(() => {
    setCount((count) => count + 1);
   }, 1000);
  return function cleanup() {
    // Side-effect cleanup...
   };
},[dependencies]);

Common usage of useEffect() ,

Making request to an api for data
Performs asynchronous tasks
To interact with browser api to manipulate DOM directly.
Reading data from local storage

What is the use Effect cleanup function?

The useEffect cleanup allows us to tidy up our code before our component unmounts.
When our code runs and reruns for every render, useEffect also cleans up after itself using the cleanup function.
The cleanup function prevents memory leaks and removes some unnecessary and unwanted behaviors.