DEV Community: Ahmd Talat

Svelte & Supabase Real-time Chat app

Ahmd Talat — Sun, 20 Feb 2022 01:43:36 +0000

Welcome, this tutorial shows how to build a simple chat app with Svelte.js and supabase.

Demo

Getting started

Step 1: Create a new project

$ yarn create vite my-svelte-app --template svelte-ts

$ cd my-svelte-app
$ yarn install

now, open your app with vscode & you should have a structure like this:

step 2: Go to supabase & create an account

create a new project to get your app's credentials

supabaseUrl | supabaseKey
once you have them, Create .env file and store the values

VITE_PUBLIC_SUPABASE_URL="https://<your project id>.supabase.co"
VITE_PUBLIC_SUPABASE_KEY="your public anon key"

we need to create the Messages table, you can do that by supabase UI or with a sql command

CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL,
  text TEXT NOT NULL,
  timestamp timestamp default now() NOT NULL
);

step 3: Create the store

once you have your API keys, now let's create a store.

Store in svelte is an object that holds you app's state

First, we need to install one more package to connect to supabase

yarn add @supabase/supabase-js

create a store file your_app_dir/src/store.ts
next, we will initialize a supabase client & a writable store

supabase gives us a function that receive a notification every time an auth event happens. by default it stores the user auth token in the localStorage & this function with run when you refresh you app.

supabase.auth.onAuthStateChange((event, session) => {
  if (event == 'SIGNED_IN') {
    store.update((oldStore) => { // updating the store if there is a token stored
      return {
        ...oldStore,
        user: session.user
      }
    })
  } else if (event == 'SIGNED_OUT') {
    store.set(defaultStore) // set the store to the default value
  }
})

Finally, we export a default object with the functions that we will use in other parts of the app.

Step 4: Last step

Now, we can create the components that we need for our little chat app. There are two main components, a Chat component that will be rendered when a user login, else a Login component will take place.

one more thing, I'd like to explain the Realtime part. it's pretty straight forward. Supabase gives us a subscribe function that we can use to listen for database events like ['*','INSERT','UPDATE','DELETE'].

I hope you find this easy & helpful, and maybe you can build on top of it for your next app. Enjoy!! :)

Repo: https://github.com/ahmdtalat/svelte-supabase-chat

you can check the docs here Svelte Supabase

cover: https://undraw.co/

Graphql server authentication with JWT

Ahmd Talat — Wed, 19 Feb 2020 14:23:45 +0000

Welcome, we will continue working on our Graphql to-do API, by setting up authorization for our app using JWT.

Getting Started

This tutorial will be focusing on:

What is JWT and how to use it
Hashing the password with bcryptjs
How to control who can interact with the data

Step 1: Install dependencies

You'll need to install jsonwebtoken and bcryptjs by running the following in the terminal:

yarn add jsonwebtoken bcryptjs

or using npm

npm i jsonwebtoken bcryptjs

So, what are JSON Web Tokens and bcryptjs, and Why?

JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties. more info. passing jwt tokens will take this form

bcryptjs

Is a way to hash the user info before hitting the DB. and why hashing? just a safety precaution.

Step 2: Re-organize project structure

Our app is growing and we need a proper structure to avoid confusion.

So, we'll put resolvers and typeDefs both in separate folders and create an index.js in each one. then you can invoke them as Node modules. const resolvers = require('./resolvers').

index.js will look something like this

typeDefs/index.js

const typesDefs = require('./typeDefs');
module.exports = typesDefs;

resolvers/index.js

const todosResolvers = require('./todos');
const userResolvers = require('./user'); // Will create this file later.
module.exports = {
  Query: {
    ...todosResolvers.Query
  },
  Mutation: {
    ...todosResolvers.Mutation,
    ...userResolvers.Mutation
  }
};

Step 3: Create a User model

We need a new MongoDB collection for the users.

const { Schema, model } = require('mongoose');

const userSchema = new Schema({
  username: String,
  password: String,
  email: String,
  created: String
});

module.exports = model('User', userSchema);

And we need to update our Todo model as well.

const todoSchema = new Schema({
  text: String,
  created: String,
  username: String, // who created it
  user: {
    // referencing the User docutment
    type: Schema.Types.ObjectId,
    ref: 'users'
  }
});

Step 4: Create a Schema and resolvers for User

we will update our typeDefs

const { gql } = require('apollo-server');

module.exports = gql`
  type Todo {
    id: ID!
    username: String! // new! add a username
    text: String!
    created: String!
  }
  // new! types of user data
  type User {
    id: ID!
    username: String!
    email: String!
    created: String!
    token: String!
  }
  // new! we use input instead of type
  // to pass the whole user info as an object
  input RegisterUserInput {
    username: String!
    password: String!
    confirmPassword: String!
    email: String!
  }
  type Query {
    getTodos: [Todo]
  }
  type Mutation {
    createTodo(text: String!): Todo!
    deleteTodo(todoId: ID!): String!
    // new! A user needs to be logged in before changing data.
    LoginUser(username: String!, password: String!): User!
    RegisterUser(user: RegisterUserInput!): User!
  }
`;

update the ApolloServer parameters

Per the documentation: there are a number of ways to handle authentication of users. And we'll be using a token in an HTTP authorization header.

const server = new ApolloServer({
  typeDefs,
  resolvers,
  // a () => {} to build our context object.
  context: ({ req }) => {
    // get the authorization from the request headers
    // return a context obj with our token. if any!
    const auth = req.headers.authorization || '';
    return {
      auth
    };
  }
});

The context object is one that gets passed to every single resolver at every level, so we can access it anywhere in our schema code.

create the user resolvers

In our case, We'll be creating two resolvers. Login & Register.

Register takes a userinput (username, pass,confirmPass, email) and returns the user info with a token.

But, First, We need import jsonwebtoken and bcrypt, So if the userinput is valid ( non-empty fields - some basic validation ), then hash the password, generate a token for that user.

const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');

const {
  UserInputError, // Throw an error if empty fields.
  AuthenticationError
} = require('apollo-server');

const User = require('../models/User');
// some string as a secret to generate toekns.
const { SECRET } = require('../config');

const getToken = ({ id, username, email }) =>
  jwt.sign(
    {
      id,
      username,
      email
    },
    SECRET,
    { expiresIn: '1d' }
  );

module.exports = {
  Mutation: {
    async LoginUser(_, { username, password }) {
      // validateLogin is a simple func that checks for empty fields
      // and return valid = false if any.
      const { errors, valid } = validateLogin(username, password);
      if (!valid) throw new UserInputError('Error', { errors });

      // check if that user already exists.
      const user = await User.findOne({ username });
      if (!user) throw new AuthenticationError('this user is not found!');

      const match = await bcrypt.compare(password, user.password);
      if (!match) throw new AuthenticationError('wrong password!');

      const token = getToken(user); // generate a token if no erros.
      return {
        id: user._id, // set an id
        ...user._doc, // spread the user info (email, created at, etc)
        token
      };
    },

    async RegisterUser(
      _,
      { user: { username, password, confirmPassword, email } }
    ) {
      const { errors, valid } = validateRegister(
        username,
        password,
        confirmPassword,
        email
      );
      if (!valid) throw new UserInputError('Error', { errors });

      const user = await User.findOne({ username });
      if (user) throw new ValidationError('This username is not valid!');

      password = await bcrypt.hash(password, 10); // hashing the password
      const newUser = new User({
        username,
        password,
        email,
        created: new Date().toISOString()
      });
      const res = await newUser.save();
      const token = getToken(res);

      return {
        id: res._id,
        ...res._doc,
        token
      };
    }
  }
};

Finally

Now, We'll update the todo resolvers (createTodo - deleteTodo), So We can control who can create and delete todos.

// Simply take an auth header and returns the user.
const getUser = async auth => {
  if (!auth) throw new AuthenticationError('you must be logged in!');

  const token = auth.split('Bearer ')[1];
  if (!token) throw new AuthenticationError('you should provide a token!');

  const user = await jwt.verify(token, SECRET, (err, decoded) => {
    if (err) throw new AuthenticationError('invalid token!');
    return decoded;
  });
  return user;
};


// The mutation takes 3 args (parent,args,context)
// in our case, we don't need parent
// destructure the todo text from args, and auth from context.
async createTodo(_, { text }, { auth }) {
      const user = await getUser(auth);
      if (user) {
        try {
          const newTodo = new Todo({
            user: user.id,
            username: user.username,
            text,
            created: new Date().toISOString()
          });
          const todo = await newTodo.save();
          return todo;
        } catch (err) {
          throw new Error(err);
        }
      }
    },
    async deleteTodo(_, { todoId }, { auth }) {
      const user = await getUser(auth);
      try {
        const todo = await Todo.findById(todoId);
        if (todo) {
          if (todo.username === user.username) await todo.delete();
          else
            throw new AuthenticationError(
              `you're not allowed to delete this todo!!`
            );
        } else throw new Error('todo is not found');
        return 'Todo deleted!';
      } catch (err) {
        throw new Error(err);
      }
    }
  }

That's it, I hope you find it easy and simple. If you have any questions, please let me know.

The cover image is from undraw.co.

Learn Graphql by building an API for a to-do app.

Ahmd Talat — Thu, 06 Feb 2020 16:04:08 +0000

Welcome, this tutorial guides you through building a Todo Graphql-powered API with Node.js and MongoDB.

Getting Started

What you will learn:

Obtain a basic understanding of GraphQL principles
Define a GraphQL schema that represents the structure of your data set
Build an API with Apollo-Server that lets you execute queries against your schema

Requirements

This tutorial assumes that you are familiar with the command line and
JavaScript/ES6, and that you have a recent version of Node.js (8+) and npm || yarn installed.

Step 1: Create a new project

Create a directory for a new project and cd into it:

mkdir graphql-todo-server
cd graphql-todo-server

Initialize a new Node.js project with yarn or npm:
```
yarn init --yes
```

Your project directory now contains a package.json file.

Step 2: Install dependencies

To run Apollo-Server, we need to install apollo-server, graphql. Also we need to install mongoose to connect to DB and create our model:

apollo-server is the core library for Apollo Server itself, which helps you define the shape of your data and how to fetch it.
graphql is the library used to build a GraphQL schema and execute queries against it.
mongoose provides a straight-forward, schema-based solution to model your application data.

Run the following command to install these dependencies and save them in
your project's node_modules directory:

yarn install apollo-server graphql mongoose

Also, create the following for a better project structure:

touch index.js

mkdir graphql models

index.js is our entry for our server
graphql directory will hold our typeDef and resolvers
model for our mongodb models

Step 3: Build a Schema

Every data graph uses a schema to define the types of data it includes.
first, we will create a file typeDefs.js which will hold our shcema inside our graphql directory

    cd graphql
    touch typeDefs.js

Now, the schema will look like this:

const { gql } = require("apollo-server");

module.exports = gql`
  type Todo {
    id: ID!
    body: String!
    created: String!
  }

  type Query {
    getTodos: [Todo]!
  }

  type Mutation {
    createTodo(body: String!): Todo!
    deleteTodo(todoId: ID!): String!
   }
`;

We are exporting our Schema to use it in index.js when creating our server, Our Todo is very simple:

The type Todo, defines our todo object's fields:

id: every Todo will have a unique id that Mongogb will create for us.
body: of type string for our todo text.
created: will hold the date.
The ! after each type means it can not be null

The Query type

our schema needs to define queries that clients can execute against the data graph.

The Mutation type

with the query, we can fetch the data, but not to modify it. our schema needs to define mutations to modify our data.

The gql tag

the gql tag is used to surround GraphQL operation and schema language (which are represented as Strings), and makes it easier to differentiate from ordinary strings.

Step 4: Create our Todo model

const { model, Schema } = require("mongoose");

const todoSchema = new Schema({
  body: String,
  created: String
});

module.exports = model("Todo", todoSchema);

// Note: the id will be generated automatically

Step 5: Define the resolvers

We've defined the shape of our data, but Apollo doesn't know how to fetch it. To fix this, we create a resolver.
First, we create the file in graphql

touch graphql/resolvers.js

Now, our resolvers will look like this:

// we need a Todo model in our mutations to modify the data.
const Todo = require('../models/Todo');

module.exports = {
  Query: {
    // here is the getTodos, that we defined in our typeDefs.
    // simply, using the Todo model to fetch all the todos with async/await
    // and return the result.
    async getTodos() {
      try {
        const todos = await Todo.find({}).sort({ created: -1 });
        return todos;
      } catch (err) {
        throw new Error(err);
      }
    }
  },

  Mutation: {
      async createTodo(_, { body }) {
    // destructure the body from our args.
    // create a new Todo, save and return that todo
    // created is the date.
      try {
        const newTodo = new Todo({
          body,
          created: new Date().toISOString()
        });
        const todo = await newTodo.save();
        return todo;
      } catch (err) {
        throw new Error(err);
      }
    },

    async deleteTodo(_, { todoId }) {
      // Find the todo by its Id and delete it.
      try {
        const todo = await Todo.findById(todoId);
        if (todo) {
            await todo.delete();
            return 'Todo deleted!';
        } else {
            return 'Todo does not exist'
        }
      } catch (err) {
        throw new Error(err);
      }
    }
  }
};

Again!, we exporting the resolvers to use it when creating the Apollo Server.
The resolver takes a couple of positional arguments (parent,args,context,info). for our app we need only the args, for more info, read Resolvers type signature.

Step 6: Create the Apollo Server

finally, We create our server and connect to the db.

const { ApolloServer } = require('apollo-server');
const mongoose = require('mongoose');

// The config file contains any project configuration
// MONGODB will be something like this "'mongodb://username:password@host:port/database?options...'", you can get your own from Mongodb.com.
// PORT: process.env.PORT || '5000', if no env variables.

const { MONGODB ,PORT } = require('./config');

const typeDefs = require('./graphql/typeDefs');
const resolvers = require('./graphql/resolvers');

const server = new ApolloServer({
  typeDefs,
  resolvers
});

mongoose
  .connect(MONGODB, {
    useUnifiedTopology: true,
    useNewUrlParser: true
  })
  .then(() => {
    console.log('MongoDB is connected ...');
    return server.listen({
      port: PORT
    });
  })
  .then(res => {
    console.log('Server running at ', res.url);
  });

Now, you can run your server by running this command.

node index.js

To re-run the server automatically when a file changes. you can install nodemon package globally. and then use it in your project.

npm install -g nodemon

nodemon index.js

your terminal will be like this if no errors.

Tada, that's it, I hope you find it helpful and please comment below if you have any questions.
Have A Great Day!

Node.js and the require function

Ahmd Talat — Thu, 16 Jan 2020 20:33:00 +0000

const hello = require('./hello.js')

I've always been curious about how things work behind the scenes, and today I'd like to share with you how the require function works in Node.js.

But, what is a module in Node.js?

a reusable block of code whose existence does not accidentally impact other code.

require actually does three main things:

locates where the file is.
wraps the content of the file in a function and executes it.
return the module.exports

That's it :)
let's see how every step works

File Location

First, Node.js checks if that file is a built-in module by calling this function:

Module._resolveLookupPaths = function(request, parent)

and if it's not the resolveLookupPaths return the path to the parent directory. If the string passed is a directory, Node looks for an index.js file. Then it creates a new object

const module = new Module(filename, parent);

, finally, the module gets cached, for more info require.cache .

Wrapping the content

In the next 2 steps, the file's content is loaded and passed to a compile function to get executed.

const content = fs.readFileSync(filename, 'utf8');

module._compile(stripBOM(content), filename);

The code of hello.js is wrapped inside this function


function(exports, require, module, __filename, __dirname) { 
  function Hello() {
    console.log("hello from emitter");
  }
  console.log("hello from hello.js");
  module.expors = Hello;
}

and this wrapper function is invoked by the call method.

result = compiledWrapper.call(thisValue, exports, require, module, filename, dirname);

the content gets executed

finally

this.exports is returned

return this.exports;

, which in our case will be

function Hello() { console.log("hello from emitter"); }

Actually, there is much much more, but I tried to mention the most important aspects of it.
Thanks, your feedback is highly appreciated.