Forem: Arindam Roy

Roles based authentication using Nextauth and next.js

Arindam Roy — Sun, 21 Jul 2024 19:23:32 +0000

Hello , so if you also wondered around the dark ally of internet searching for your own Auth and roles based solutions but you couldn't find any or maybe you did it's just doesn't work anymore then you are at the right place with the functional code i'll also give the packages version so it would be easier for you guys.

now let's first install all the packages you'll need

  npm install next-auth@beta
  npm install drizzle-orm zod react-hook-form

now let's setup the auth providers for nextAuth will create a file in our

lib/auth/index.ts

in this file we are gonna use the credentails provider because by default OAuth doesn't give us any roles back but we are also gonna see how to use oAuth to assign roles

  export const { handlers, signIn, signOut, auth } = NextAuth({
 adapter: DrizzleAdapter(db),
  providers: [
    Credentials({
      name: "credentials",
      credentials: {
        email: {
          type: "email",
          label: "Email Address",
          placeholder: "Email Address",
        },
        password: {
          type: "password",
          label: "Password",
        },
      },
      async authorize(credentials) {
        const { email, password } = await signInSchema.parseAsync(credentials);

        const user = await db
          .select()
          .from(users)
          .where(eq(users.email, email))
          .execute()
          .then((res) => res[0]);

        if (!user || !user.password) return null;

         const isValidPassword = await bcryptjs.compare(password, user.password);

         if (!isValidPassword) return null;

        return {
          id: user.id,
          name: user.name,
          email: user.email,
        };
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,

      profile(profile: GoogleProfile) {
        return { ...profile, role: "user" };
      },
    })
  ],
});

Maybe it's a good time to mention that i'm using postgres and drizzle ORM to save and retrieve this information from DB.

we are using drizzle adapter for it you can installed it using

npm install drizzle-orm @auth/drizzle-adapter
npm install drizzle-kit --save-dev

you can find the drizzle suited schema in here link for the auth to work . now we just have to use this handler in the api routes to make it work.

import { handlers } from "@/lib/auth";

export const { GET, POST } = handlers;

now the auth works but there's no rolese yet. first we'll modify the drizzle schema and then our nextAuth options.

Remember this can be a simple field as roles in the users table which holds a string value . but I made it this way so i can make as many roles as i want and add permission to it

export const roles = pgTable("roles", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text("name").notNull(),
  description: text("description"),
});

export const permissions = pgTable("permissions", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text("name").notNull(),
  description: text("description"),
});

export const rolePermissions = pgTable("role_permissions", {
  roleId: text("roleId").references(() => roles.id, { onDelete: "cascade" }),
  permissionId: text("permissionId").references(() => permissions.id, {
    onDelete: "cascade",
  }),
});

export const userRoles = pgTable("user_roles", {
  userId: text("userId").references(() => users.id, { onDelete: "cascade" }),
  roleId: text("roleId").references(() => roles.id, { onDelete: "cascade" }),
});

now we need to modify the NextAuthOption so roles and permission get included in the user session.

first we'll define the callback functions for getting the roles ourselves .

 callbacks: {
    async jwt({ token, user }) {
      if (user && user.id) {
        const { role, permissions } = await getUserRoleAndPermissions(user.id);
        token.role = role;
        token.permissions = permissions;
      }
      return token;
    },
    async session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.id;
        session.user.role = token.role;
        session.user.permissions = token.permissions;
      }
      return session;
    },
  },

The getRolesandPermission function does exactly as it sounds it uses drizzle to query roles and permission from db . By default this alone won't work we also need to make some changes in the types.

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      role: string;
      permissions: string[];
    } & DefaultSession["user"];
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string;
    role: string;
    permissions: string[];
  }
}

now by accessing the session we can get roles and permission. and by using this you can block the user at page level or by using middleware a whole route group you can protect.

this method can be really useful in a multi tenant sass may be you don't wanna save your user elsewhere this is a perfect solutions. Thank you for reading this

I created a nosql DB using rust

Arindam Roy — Fri, 05 Jul 2024 01:42:42 +0000

Well when i say i created a Nosql db using rust i mean kind of. like people ask me why would you do that i always ask myself why not someone even though making js in 10 days would be good idea so i really don't think it would be consider as the most bad idea.

so a Nosql db let's talk about this first so what is database is from our computer science class we all know database is a tool for storing and accessing the data .

Now a database is consist of three many things it can have more components but this are the basic one

1) Data model (representation of the way we define models for db)
2) Storage Engine (responsible for storing , clearing disk and memory to access or delete data)
3) query engine (responsible for the talking to the db)

Ok now let's define the document model first . I'm designing this after the mongodb document model which was made using c++ so it supports much more data types but we will make a very simple implementation of this.

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Document {
    id: Uuid,
    created_at: DateTime<Utc>,
    updated_at: DateTime<Utc>,
    data: HashMap<String, Value>,
}
// document model

#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
pub enum Value {
    Null,
    Boolean(bool),
    Integer(i64),
    Float(f64),
    String(String),
    Array(Vec<Value>),
    Object(HashMap<String, Value>),
    Date(DateTime<Utc>),
}

// basically we can put any kind of data into our db

so now we know how is our data gonna look like once it gets stored but how to store it is a challenge because remember in a database the most important part is saving something and retrieving something. we analyzed any database performance by it's read and write speed so it's absolutely crucial how you store your data .

so i took a very simple approach here i just saved the data into the disk and kept a cache in the ram for faster retrieval.

#[derive(Debug, Clone, Serialize, Deserialize)]
struct BlockMetadata {
    id: String,
    size: usize,
    next_block: Option<u64>,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
struct Block {
    metadata: BlockMetadata,
    data: Vec<u8>,
}
// we use block to store the  data in disk

struct DiskManager {
    file: File,
    free_blocks: VecDeque<u64>,
}

struct Cache {
    blocks: HashMap<u64, Block>,
    lru: VecDeque<u64>,
}

//  A deque tracking the least recently used (LRU) blocks for cache eviction.

pub struct StorageEngine {
    disk: DiskManager,
    cache: Cache,
    index: HashMap<String, u64>, // Document ID to first block number
}
// is the core structure that ties everything together

Now we know how to store our data and after storing how it look like now we need to access the data for that we'll create a query engine of our own. I thought of creating a new template language for accessing the data then i though we are far behind the days of useless query language template like AWS velocity template language like honestly who though that was a good idea ?

Anyway for our simple program i just put a bunch of operations in an enum and wallah

#[derive(Debug, Clone)]
pub enum Operator {
    Eq,
    Ne,
    Gt,
    Lt,
    Gte,
    Lte,
    In,
    Nin,
}
// very basic euals , not equals , greater than ,less than, grater than equal , Inside the array , not inside the array

#[derive(Debug, Clone)]
pub struct Condition {
    field: String,
    operator: Operator,
    value: Value,
}

#[derive(Debug, Clone)]
pub struct Query {
    conditions: Vec<Condition>,
}

Now for the final part to test out your own db . I'm not gonna lie it's not a good experience i still haven't created an library for talking to this db easily so you have to set some stuff up.

first create a function for initializing a new document

fn create_test_document(name: &str, age: i64, city: &str) -> Document {
        let mut doc = Document::new();
        doc.insert("name".to_string(), Value::String(name.to_string()));
        doc.insert("age".to_string(), Value::Integer(age));
        doc.insert("city".to_string(), Value::String(city.to_string()));
        doc
    }

then you can use this function to add as many data as you want


        let db_path = Path::new("test.bin");
        let mut storage = StorageEngine::new(db_path).unwrap();

        let doc1 = create_test_document("Alice", 30, "New York");
        let doc2 = create_test_document("Bob", 25, "San Francisco");
        let doc3 = create_test_document("Charlie", 35, "New York");

        storage
            .write(
                doc1.id().to_string().as_str(),
                &serde_json::to_vec(&doc1).unwrap(),
            )
            .expect("Failed to write doc1");
        storage
            .write(
                doc2.id().to_string().as_str(),
                &serde_json::to_vec(&doc2).unwrap(),
            )
            .expect("Failed to write doc2");
        storage
            .write(
                doc3.id().to_string().as_str(),
                &serde_json::to_vec(&doc3).unwrap(),
            )
            .expect("Failed to write doc3");

Just judging by the performance test i ran on my own computer I'm hopeful this can be an actual thing someday . even though i only created this as a fun project i still have so many things planned we can do so if you guys are interested and want to be a part of the project just create a PR in github.

This was made solely because of learning and understanding so if you have any suggestion or complains you can choose to do so in github.

here is the github project link
Github

thank you for sticking to the very end.

Building a Simple Search Engine with Rust and WebAssembly for web

Arindam Roy — Fri, 28 Jun 2024 17:23:25 +0000

Introduction

You might wonder why we need another search engine implementation, especially one using Rust and WebAssembly. While it's true that many developers start with a TODO app, I wanted to challenge myself and explore something different for my first blog post. I chose to create an Algolia-like search engine because that the first thing I came across Algolia on dev.to and I had no better idea.

What is Algolia?

Algolia is a powerful search provider for web applications. It's known for its speed and efficiency in delivering search results. Their tagline, "Show users what they need,"

Our Project: A WebAssembly Search Engine

In this project, we'll create a WebAssembly (Wasm) package using Rust, compile it to JavaScript, and run it in the browser. While you could build a similar search engine using JavaScript frameworks or vanilla JS (possibly with comparable performance), our goal is to explore the possibilities of Rust and WebAssembly.

Let's get started!

Setting Up the Rust Project

First, create a new Rust library project:

cargo new --lib algolia-clone-wasm

Add the following to your Cargo.toml:

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.4"

Implementing the Search Engine

Let's define the core types for our search engine:

use serde::{Serialize, Deserialize};
use std::collections::{HashMap, HashSet};
use wasm_bindgen::prelude::*;

#[derive(Serialize, Deserialize)]
struct Document {
    id: String,
    content: String,
}

#[derive(Serialize, Deserialize)]
struct SearchResult {
    id: String,
    score: usize,
}

#[wasm_bindgen]
pub struct SimpleSearch {
    documents: Vec<Document>,
    index: HashMap<String, HashSet<String>>,
    visited_documents: HashMap<String, Document>,
}

The core of our simple search engine implementation consists of three main components:

Data Structures:

Document: Represents a searchable item with an ID and content.
SearchResult: Represents a search result with an ID and a relevance score.
SimpleSearch: The main struct that holds our search engine's state.

Now, let's implement the SimpleSearch struct and its methods:

#[wasm_bindgen]
impl SimpleSearch {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Self {
        SimpleSearch {
            documents: Vec::new(),
            index: HashMap::new(),
            visited_documents: HashMap::new(),
        }
    }

    pub fn add_document(&mut self, id: String, content: String) {
        let doc = Document {
            id: id.clone(),
            content: content.clone(),
        };
        self.documents.push(doc);

        for word in content.to_lowercase().split_whitespace() {
            self.index
                .entry(word.to_string())
                .or_insert_with(HashSet::new)
                .insert(id.clone());
        }
    }

    pub fn search(&self, query: String, limit: usize) -> Result<JsValue, JsValue> {
        let lowercase_query = query.to_lowercase();
        let query_words: Vec<&str> = lowercase_query.split_whitespace().collect();
        let mut scores: HashMap<String, usize> = HashMap::new();

        for word in query_words {
            if let Some(matching_docs) = self.index.get(word) {
                for doc_id in matching_docs {
                    *scores.entry(doc_id.clone()).or_insert(0) += 1;
                }
            }
        }

        let mut results: Vec<SearchResult> = scores
            .into_iter()
            .map(|(id, score)| SearchResult { id, score })
            .collect();
        results.sort_by(|a, b| b.score.cmp(&a.score));
        results.truncate(limit);

        serde_wasm_bindgen::to_value(&results).map_err(|e| e.into())
    }

    pub fn get_document(&self, id: String) -> Result<JsValue, JsValue> {
        if let Some(doc) = self.documents.iter().find(|d| d.id == id) {
            serde_wasm_bindgen::to_value(doc).map_err(|e| e.into())
        } else {
            Ok(JsValue::NULL)
        }
    }
}

The search method implements a basic search algorithm:

It splits the search query into individual words.
For each word, it looks up matching documents in the inverted index.
It keeps a score for each document, incrementing it for each matching word.
Finally, it sorts the results by score and returns the top matches.

The wasm-bindgen crate provides a bridge between JavaScript and Rust types, allowing seamless interaction between the two languages.

Compiling to WebAssembly

To compile our Rust code to WebAssembly, run:

wasm-pack build --target web

This command creates a pkg folder in your project root, containing the necessary files to run your WebAssembly code.

Using the Search Engine in a Web Page

Here's a simple HTML file demonstrating how to use our search engine:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust + WebAssembly Search Engine</title>
    <script type="module">
        import init, { SimpleSearch } from './pkg/algolia_clone_wasm.js';

        async function run() {
            await init();

            const searchEngine = new SimpleSearch();

            // Add sample documents
            searchEngine.add_document("1", "TypeScript is a typed superset of JavaScript");
            searchEngine.add_document("2", "JavaScript is a popular programming language");
            searchEngine.add_document("3", "Algolia provides powerful search capabilities");

            // Set up event listener for search
            document.getElementById('searchForm').addEventListener('submit', (e) => {
                e.preventDefault();
                const query = document.getElementById('searchInput').value;
                const results = searchEngine.search(query, 10);
                displayResults(results);
            });

            function displayResults(results) {
                const resultsContainer = document.getElementById('results');
                resultsContainer.innerHTML = '';
                results.forEach(result => {
                    const doc = searchEngine.get_document(result.id);
                    const resultElement = document.createElement('div');
                    resultElement.innerHTML = `<p><strong>ID:</strong> ${result.id}, <strong>Score:</strong> ${result.score}</p><p><strong>Content:</strong> ${doc.content}</p>`;
                    resultsContainer.appendChild(resultElement);
                });
            }
        }

        run();
    </script>
</head>
<body>
    <h1>Rust + WebAssembly Search Engine</h1>
    <form id="searchForm">
        <input type="text" id="searchInput" placeholder="Enter search query">
        <button type="submit">Search</button>
    </form>
    <div id="results"></div>
</body>
</html>

Conclusion

Forgive me if you thought this will be helpful it was just for fun and as i was bored and wanted to try something it was about demonstrating the potential of combining Rust and WebAssembly to create a simple search engine. While this implementation may not be as feature-rich as Algolia, it showcases the possibilities of using Rust in web development.

In future iterations, we could:

Implement an in-memory database to store visited pages
Benchmark this implementation against JavaScript frameworks
Add more advanced search features, such as fuzzy matching or relevance scoring

Thank you for reading!