DEV Community: Oliver Kem

tRPC APIs - Part 2

Oliver Kem — Sun, 30 Jul 2023 14:49:19 +0000

Hello everyone!

welcome back, in our first session we had implemented our backend server of the tRPC apis where we built a simple server that fetches books from some datasource and returns that in json format. We also tested our aplication and it worked fine. In this section, we are going to build our frontend that interacts with our backend server, fetches data and displays it in our app. To do this, I will be building a simple React application using vite.

Prerequisites

Part 1 of our session. Feel free to build your own
Typescript
React knowledge

Let us begin.

From our introduction, we mentioned that tRPC implements typesafe Remote Procedural Call and this basically means it allows a machine from one side to call another procedure or function from another machine. The typesafe bit means it leverages typescript for typesafety. This helps in code building and productivity boost during application development. Let us start developing our application
We had created a folder where we put two folders, trpc-backend and trpc-frontend. For now, navigate to the frontend folder and run the following command.

$ pnpm vite@latest

Follow the prompt, I will also be using typescript. You should be getting something like this in the folder. However, feel free to develop it how you like.

Now let us continue with development, I will be using TailwindCSS for some styling and React Query for our state management. So let us initialize our application with tailwind.

$ pnpm add -D tailwindcss  postcss autoprefixer
$ npx tailwindcss init -p
$ pnpm add react-query 
$ pnpm add @trpc/client

With this, let us to our index.css file, comment all the code add the following.

@tailwind base;
@tailwind components;
@tailwind utilities;

Replace the code in the

`tailwind.config.js with this



/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now our application can use TailwindCSS.
In our main.tsx file, we need to wrap with react-query to make our state available for every component, to do so, paste the following



import App from './App.tsx'
import './index.css'
import { QueryClient, QueryClientProvider, } from 'react-query';
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
    <App />
</QueryClientProvider>
  </React.StrictMode>,
)

Now react-query will be available for our application.
Now let us go to our App.tsx file and add the following.

Here is where we will handle the state logic and the fetching logic. tRPC changed alot from version 9. So the documentation for integrating with react also changed.



import { AppRouter } from '../../trpc-backend/src/trpc/trpc';
import { createTRPCProxyClient, httpBatchLink} from '@trpc/client'
function App(){
    const trpcClient= createTRPCProxyClient<AppRouter>({
        links:[
            httpBatchLink({
                url: 'http://localhost:3000/trpc',
            }),
        ]
    });
}

Let us go through this, here we imported the AppRouter type we had exported from our backend server, then we import the httpBatchLink and createTRPCProxyClient from the client library. We then set the link to the backend server and that is it. Now are ready to interact with our server data.
Next we import the functions that help up query



import {  useMutation, useQuery, useQueryClient } from 'react-query';
import { AppRouter } from '../../trpc-backend/src/trpc/trpc';
import { createTRPCProxyClient, httpBatchLink} from '@trpc/client'
type Book={
    id: number,
    title: string,
    img: string,
    description: string,
    price: number
    author: string
}
function App(){
    const {data,isLoading, isError,} = useQuery({
        queryKey: ['books'],
        queryFn: async () => await trpcClient.getBooks.query(),

    })
    const trpcClient= createTRPCProxyClient<AppRouter>({
        links:[
            httpBatchLink({
                url: 'http://localhost:3000/trpc',
            }),
        ]
    });
   if(isLoading) return <div>Loading...</div>
   if(isError) return <div>Error</div>
   return (
        <div>
            <h1 className="text-3xl font-bold">React tRPC and react query</h1>

            <div className='grid grid-cols-2 gap-1 md:grid md:grid-cols-3 md:gap-2'
            >
                {
                    data?.map((item: Book)=>{
                        return (
                            <div key={item.id} className='border-2 border-gray-200 rounded-md p-2 hover:bg-sky-500 transition ease-in-out delay-150'>
                                <img src={item.img} alt={item.title} className='w-32 h-32'/>
                                <h2 className='text-xl font-bold'>{item.title}</h2>
                                <p className='text-sm'>{item.description.slice(0,50)}...</p>
                                <p className='text-sm font-bold'>${item.price}</p>
                            </div>

                        )
                    })
                }
            </div>          
        </div>
    )
}

With this code, we have just

tRPC APIs - Part 1

Oliver Kem — Tue, 20 Jun 2023 11:15:48 +0000

Hello Devs.

When it comes to APIs, the first thing that comes to your mind is RESTful and GraphQL APIs. While these two powers the modern web communication, there's this new talk in town, tRPC (typesafe Remote Procedure Call). This is a framework for writing APIs meaning it offers all advantages of REST and GraphQL APIs are more such as:

Type safely for both client and server.
Abstraction on schema
Secure Connection from client to server

and more....
What do you mean 🤔🤔🤔🤔🤔🤔🤔? Check this out. Let's start with how APIs changed the world

Rest APIs

When rest APIs came, they provided a means of fetching and push data from the server to client fast, lightweight and easier because data was sent and retrieved in JSON format. But as applications grew, there as need of a predefined way or schema where people could know exactly what they are fetching and they could filter what they could fetch from the server because Rest APIs returns alot of information (over fetching) or little information (under fetching) which in most cases is unnecessary

GraphQL

In 2012, Facebook started developing GraphQL to address the major concerns of Rest APIs and solve on scalability of their applications, at first it was developed to be used internally until 2015 where they released it to the Public (open source). This got the community so much involved in the project that they started contributing to the GraphQL project and developed libraries like ApolloGraphQL, GraphQL Yoga, Express GraphQL e.t.c. And while GraphQL solved alot of problems, the whole idea of defining a schema for requests was somehow hectic. When your application starts to scale you'll need to create each schema for each request and resource you want to fetch.

tRPC

tRPC mean *TypeSafe - Remote Procedure Call *. RPC mean *** remote procedure call ** this basically means allowing a machine or device from one device to call a function from another PC or machine. When you at typesafe, this maintains type safety between the (one machine)client and (other machine)server such that you can develop your application safely and easily.

Let's begin. We will start by creating our backend. So, go to your terminal and run the following.

$ mkdir trpc
$ cd trpc
$ mkdir trpc-backend
$ cd trpc-backend

$pnpm init -y
$ code .

Now let us install a couple of dependencies, express, @trpc/server, zod cors. I will also be using typescript, so let us install some types library @types/node, @types/express, nodemon, typescript

$ pnpm add express zod cors @trpc/server
$ pnpm add -D @types/node @types/express nodemon typescript

Now, from this image, we will initialize our application, set your package.json to look exactly like mine.
Now make a root directory called src. Then inside, create two directories data and trpc. Inside the data, create an index.ts file, then paste the following.

export const books=[
    {
        id:1,
        title:"The Lord of the Rings",
        author: "J.R.R. Tolkien",
        price: 20,
        img: "https://images-na.ssl-images-amazon.com/images/I/51UoqRAxwEL._SX331_BO1,204,203,200_.jpg",
        description: "The Lord of the Rings is an epic high fantasy novel by the English author and scholar J. R. R. Tolkien. Set in Middle-earth, the world at some distant time in the past, the story began as a sequel to Tolkien's 1937 children's book The Hobbit, but eventually developed into a much larger work. Written in stages between 1937 and 1949, The Lord of the Rings is one of the best-selling books ever written, with over 150 million copies sold."
    },
    {
        id:2,
        title:"The Hobbit",
        author: "J.R.R. Tolkien",
        price: 15,
        img: "https://images-na.ssl-images-amazon.com/images/I/51o5n%2B1Q%2BtL._SX331_BO1,204,203,200_.jpg",
        description: "The Hobbit, or There and Back Again is a children's fantasy novel by English author J. R. R. Tolkien. It was published on 21 September 1937 to wide critical acclaim, being nominated for the Carnegie Medal and awarded a prize from the New York Herald Tribune for best juvenile fiction. The book remains popular and is recognized as a classic in children's literature."
    },
    {
        id:3,
        title:"The Silmarillion",
        price: 25,
        author: "T.B Tolkien",
        img: "https://images-na.ssl-images-amazon.com/images/I/51Q5ZQ%2BZ1TL._SX331_BO1,204,203,200_.jpg",
        description: "The Silmarillion is a collection of mythopoeic works by English writer J. R. R. Tolkien, edited and published posthumously by his son, Christopher Tolkien, in 1977, with assistance from Guy Gavriel Kay. The Silmarillion, along with J. R. R. Tolkien's other works, forms an extensive, though incomplete, narrative that describes the universe of Eä in which are found the lands of Valinor, Beleriand, Númenor, and Middle-earth, within which The Hobbit and The Lord of the Rings take place."
    },
    {
        id:4,
        title:"The Children of Húrin",
        price: 30,
        author: "J.R.R. Tolkien",
        img: "https://images-na.ssl-images-amazon.com/images/I/51Q5ZQ%2BZ1TL._SX331_BO1,204,203,200_.jpg",
        description: "The Children of Húrin is an epic fantasy novel which forms the completion of a tale by J. R. R. Tolkien. He wrote the original version of the story in the late 1910s, revised it several times later, but did not complete it before his death in 1973. His son, Christopher Tolkien, edited the manuscripts to form a consistent narrative, and published it in 2007 as an independent work."

    },
];

We will be using this as our dummy database data. Feel free to add some database functionality to retrieve and add data.
Now, inside the trpc folder we created, add a file called trpc.ts, then paste the following lines of code.

import { initTRPC } from "@trpc/server";
import {z} from 'zod';
import { books } from "../data/index.ts";
const t  = initTRPC.create()
const publicProcedure = t.procedure;

export const appRouter = t.router({
    greeting: publicProcedure
        .query(()=>{
            return "Hello World"
        }),
    getBooks: publicProcedure
        .query(()=>{
            return books;
        }),
    fetchABook: publicProcedure
        .input(z.object({
            id: z.number(),
        }))
        .query(({input})=>{
            console.log(input);
            const book =  books.find((book)=>book.id === input.id)
            console.log(book);
            return book;
        }),
    addABook: publicProcedure
        .input(z.object({
            title: z.string(),
            id: z.number(),
            author: z.string(),
            description: z.string(),
            price: z.number(),
            img: z.string(),
        }))
        .mutation(({input})=>{
            books.push({
                title: input.title,
                id: input.id,
                img: input.img,
                description: input.description,
                price: input.price,
                author: input.author,
            });
            return input;
        }),

})
export type AppRouter = typeof appRouter;

From above, we have initialized trpc with initTRPC, we have then used zod as an input validator, we will use this to validate our inputs before executing a query.
Now, let us test our application.
Go to your terminal and run the following.
Now, we need to have a wrapper that will be our web server to hosting our API. Inside the src folder, create a file called index.ts add the following

import { appRouter, } from "./trpc/trpc.ts";
import express from 'express';
import * as trpExpress from '@trpc/server/adapters/express';
import cors from 'cors';
const app = express();
app.use(cors());
app.use(express.json());
app.use('/trpc',
    trpExpress.createExpressMiddleware({
        router: appRouter,
        createContext: ({req,res}) => {
            const token = req.headers.authorization;

            return {
                // this is where you would put your auth, db, etc...
            }
        },

    })
);
app.get('/',(req,res)=>{
    return res.json({message:"Hello World"});
});
app.listen(3000,()=>{
    console.log("Server started on port 3000");
});

From above, we have just imported the server instance we created. Now we use the express adapters, we use express for our backend instance, you can use other wrappers like NextJS, if you are building a nextJS application. We use cors to help query to our backend instance. Now with this, let us start.

$ pnpm dev

Now, you can use postman or your browser to test the endpoints.
Go to https//localhost:3000/trpc/greeting on your browser. You should get the following response

IF you get this, it means your backend server is successfully running. Now with this, you are good to go. I will be continuing with part two.

Connecting React Native App to Crypto Wallet.

Oliver Kem — Sat, 17 Jun 2023 13:00:56 +0000

Hello everyone, 👋, in this blog, I will show you how you can connect your React Native application to a wallet on your phone, you might be building an application where you need a user to pay with cryptocurrency in their wallet or you want a user to authenticate using their wallet address, well , you have come to the right place.

Prerequisites

React Native knowledge
Javascript

Let's begin, we start by creating a new react native application, I will be using Expo but feel free to switch to using the CLI, go to your terminal and create a React Native application

$ npx create-expo-app MyApp

Follow the prompt if there is any then initialize a new application.
Then we open the installation in VSCODE.

$cd MyApp
$code .

When you Open the Application, you'll be greeted by page showing all elements.

Let us change our App.js file and we add a few elements and styling, paste the following lines of code

import { StatusBar } from 'expo-status-bar';
import './global';
import { StyleSheet, ImageBackground,SafeAreaView, Platform,View } from 'react-native';
import React, { useState } from 'react';
import MainPage from './screens/MainPage';
import WalletConnectProvider from "@walletconnect/react-native-dapp";
import AsyncStorage from "@react-native-async-storage/async-storage";
const SCHEME_FROM_APP_JSON = "walletconnect-example";

export default function App() {
    let screen = <MainPage/>;
    return (
        <>
            <StatusBar style="dark" />
            <ImageBackground style={{flex:1}} imageStyle={{opacity: .5}} resizeMode='cover' source={require('./assets/background.jpg')}>
                <SafeAreaView style={styles.container}>
                    <WalletConnectProvider
                        redirectUrl={
                            Platform.OS === "web"
                            ? window.location.origin
                            : `${SCHEME_FROM_APP_JSON}://`
                        }
                        storageOptions={{
                            asyncStorage: AsyncStorage,
                        }}
                        >
                        <View style={styles.container}>
                            {/* <StatusBar style="auto" /> */}
                            {screen}
                            {/* <WalletConnectExperience functionStateHandler={functionStateHandler} /> */}
                        </View>
                    </WalletConnectProvider>
                </SafeAreaView>
            </ImageBackground>
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    backgroundImage:{
        // opacity: .15,
        flex:1,
        // backgroundColor:'rgba(0,0,0,.5)'
    }
});

With this, I have wrapped the main page with the WalletConnectProvider. We will see this later in action
Now let's create a components folder and then we create a component called Button.component.jsx. Inside the file, paste the following code.

import React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
function Button({children,onPress, widthSet}) {
    return (
        <View style={[styles.buttonOuterContainer,{width: widthSet,}]}>
            <Pressable
                style={({ pressed }) =>
                    pressed
                        ? [styles.pressed, styles.button_Inner_container]
                        : styles.button_Inner_container
                }
                android_ripple={{ color: '#6CA9F9' }}
                onPress={onPress}
            >
                <Text style={styles.buttonText}>{children}</Text>
            </Pressable>
        </View>
    );
}
const styles = StyleSheet.create({
    button_Inner_container: {
        backgroundColor: '#4E97F5',

        paddingVertical: 16,
        paddingHorizontal: 16,
        elevation: 4,
    },
    buttonOuterContainer: {

        margin: 4,
        borderRadius: 1,
        overflow: "hidden",
    },
    buttonText: {
        color: "#fff",
        textAlign: "center",
    },
    pressed: {
        opacity: 0.75,
    },
});
export default Button;

We have just added a button and styled it. Nothing fancy at all.
...
Now, let's create a folder called screens and the we add a page called MainPage.jsx, let us install a library

 $ npm install react-native-dropdown-picker

Inside the mainpage, paste the following lines of code

import React,{useEffect} from 'react';
import { StyleSheet,TouchableOpacity, Text,FlatList, View, Dimensions, TextInput, ScrollView, Alert } from 'react-native';
import {Dropdown} from 'react-native-element-dropdown';
import { AntDesign } from '@expo/vector-icons';
import ButtonComponent from '../components/Button.component.jsx'
function MainPage() {
    const { height } = Dimensions.get('window');
    const connector = useWalletConnect();
    const [isFocus, setIsFocus] = React.useState(false);
    const [value, setValue] = React.useState({wallet:0, amount:0, receiver: ''});
    const [transactionHistory,setTransactionHistory] = React.useState([]);
    const [ownerAddress,setOwnerAddress] = React.useState('');




    return (
        <View style={{flex:1,marginTop:height*.09,position:'relative'}}>
            <View  style={{flexDirection:'row',alignItems:'center',justifyContent: 'space-between',marginHorizontal:7 }}>
                <View style={{flexDirection:'row', alignItems:'center'}}>
                    <Text style={styles.boldText}>Total Sent:</Text>
                    <Text style={styles.boldText}>0 BTC</Text>
                </View>
                <View style={{flexDirection:'row', alignItems:'center'}}>

                        <>
                          <Text style={styles.boldText}>Wallet Address</Text>
                             <ButtonComponent widthSet={'20%'} onPress={()=>{}} >Log out</ButtonComponent>
                       </>

                </View>
            </View>
            <Text style={[styles.boldText,{marginTop:height*.04, textAlign:'center'}]}> Send only 5 BTC per transaction</Text>

            <Dropdown
                style={[styles.dropdown, isFocus && { borderColor: '#000' }]}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                inputSearchStyle={styles.inputSearchStyle}
                iconStyle={styles.iconStyle}
                data={[
                    { label: "Blockchain", value: 1},
                    {label:"Trust Wallet",value: 2},
                    {label:"Binance",value: 3},
                ]}
                search
                maxHeight={300}
                labelField="label"
                valueField="value"
                placeholder={!isFocus ? 'Select Account' : '...'}
                searchPlaceholder="Search..."
                value={value.wallet}
                onFocus={() => setIsFocus(true)}
                onBlur={() => setIsFocus(false)}
                onChange={item => {
                    setValue({wallet: item.value});
                    setIsFocus(false);
                }}
                renderLeftIcon={() => (
                    <AntDesign style={styles.icon}
                        color={isFocus ? '#fff' : 'black'}
                        name="Safety"
                        size={20}
                    />
                )}
            />
            <View style={{marginTop:height*.04,alignItems:'center',flexDirection:'row'}}>
                <Text style={styles.boldText} >Receiver's Wallet:</Text>
                <TextInput keyboardType='twitter' 
                    style={[styles.textInput,{width:'70%'}]} 
                    placeholder="0.00000000" 

                />
            </View>
            <View style={{marginTop:height*.04,justifyContent:'space-evenly',alignItems:'center',flexDirection:'row'}}>
                <Text style={styles.boldText}>BTC Amount</Text>
                <TextInput keyboardType='number-pad' 
                    style={styles.textInput} 
                    placeholder="0.00000000" 

                />
                <Button widthSet={'20%'} label={'Send'}/>
            </View>
            <View style={{marginTop:height*.04,marginHorizontal:height*.04}}>
                <View style={{flexDirection:'row', justifyContent:'space-between',borderBottomWidth:1,paddingVertical:10}}>
                    <Text style={styles.boldText}>History</Text>
                    <Text style={styles.boldText}>Clear</Text>
                </View>
                <ScrollView style={{height: height*.2}}>
                    <FlatList
                        data={transactionHistory}
                        renderItem={({ item }) => (
                            <View style={{flexDirection:'row',justifyContent:'space-between',paddingVertical:10}}>
                                <Text style={styles.normalText}>{item.date}</Text>
                                <Text style={styles.normalText}>{item.amount}</Text>
                            </View>
                        )}
                        keyExtractor={item => item.id}
                    />
                </ScrollView>
            </View>
            <View style={{position:'absolute',bottom:30}}>
                <Text style={[styles.boldText,{textAlign:'center',fontSize:20}]}>Need to Know</Text>
                <Text style={styles.normalText}>1. Transactions will get 6 confirmations on the Blockchain</Text>
                <Text style={styles.normalText}>2. Transactions stays for only 45 days before becoming invalid</Text>
                <Text style={styles.normalText}>3. Transactions takes 20-30mins</Text>
            </View>
        </View>
    );
}
const styles = StyleSheet.create({
    rowContainer: {
        backgroundColor: '#4E97F5',
    },
    textInput:{
        borderBottomWidth:.5,
        // ,
        // paddingHorizontal:10,
        // paddingVertical: 16,
        paddingHorizontal: 16,
    },
    boldText:{
        fontWeight:'bold',
        fontSize:16, 
    },
    normalText:{
        fontSize:16,
    },
    icon: {
        marginRight: 5,
    },
    placeholderStyle: {
        fontSize: 16,
    },
    selectedTextStyle: {
        fontSize: 16,
    },
    iconStyle: {
        width: 20,
        height: 20,
    },
    inputSearchStyle: {
        height: 40,
        fontSize: 16,
    },
    button: {
        backgroundColor: "#5A45FF",
        color: "#FFFFFF",
        borderRadius: 2,
        paddingHorizontal: 16,
        paddingVertical: 12,
    },
    text: {
        color: "#FFFFFF",
        fontSize: 16,
        fontWeight: "600",
    },
    dropdown: {
        height: 50,
        borderColor: '#000',
        borderBottomWidth: 0.5,
        paddingHorizontal: 8,
        marginVertical: 20,
    },
});
export default MainPage;

When you implement this, you will get a nice design as shown below.

//=====================image===========================//
Now, let us install a couple of dependencies

npx expo install @react-native-async-storage/async-storage @walletconnect/client @walletconnect/react-native-dapp

After you have done this we do this

npm install react-native-get-random-values@1.8.0 react-native-randombytes@3.6.1 react-native-crypto@2.2.0

After successfully installing this, we need to do a small thing. In the package.json file, let's add a script to be executed.

    "postinstall": "rn-nodeify --hack --install process,crypto,events,constant,console,stream,url,util"

This is very essential because the

`@wallectconnect/react-native-dapp needs crypto module which is only native to NodeJS and not React Native, running this will include it to your application.

Now let's finish up on the frontend functionality by adding the following functions



    const connectWallet =() => {
        return connector.connect();
    };
    const killSession =() => {
        setValue({wallet:0});

        return connector.killSession();
    };
    const sendButtonHandler = () => {
        console.log('Pressed');
        console.log('Value is: ',value)
        if (value.amount <5 && value.amount && value.receiver && value.wallet && connector.connected && ownerAddress) {
            Alert.alert('Warning!!','Are you sure you want to send this?',[
                {
                    text:'No',
                    onPress:() => {
                        console.log('No Pressed');
                    },
                    style:'cancel'
                },
                {
                    text:'Yes',
                    onPress:() => {
                        console.log('Yes Pressed');

                    },
                    style:'destructive'
                }
            ])
            return;
        }
        Alert.alert('Error','Please fill all the fields correctly');
    };
    function connectButtonHandler(){
        console.log('Pressed',value.wallet)
        if(value.wallet===2){
            connectWallet();
        }
    }
    useEffect(() => {
        if(connector.connected){
            setOwnerAddress(connector.accounts[0]);
        }
    }, [connector.connected]);
    function Button({ onPress, label }) {
        return (
            <TouchableOpacity onPress={onPress} style={styles.button}>
                <Text style={styles.text}>{label}</Text>
            </TouchableOpacity>
        );
    }
    useEffect(() => {
        connectButtonHandler();
    }, [value.wallet]);

Now let we will be binding this to their respective buttons. The final code in the Mainpage.jsx is like this
Final Code

React Router v6

Oliver Kem — Fri, 16 Jun 2023 13:55:24 +0000

Hello Everyone, React router v6 is out. I have been tinkering with it for a while and I love it. With everything updated and some new hooks to use with your application, I have decided to write this article to share my knowledge on it. Let's begin

Prerequisites

React
Javascript/Typescript

Now, let us begin. We will start by creating our React Application using vite. I will be using pnpm but feel free to use yarn or npm.
Go to your terminal and run the following commands

$ pnpm create vite@latest

Follow the prompts and select Typescript. Install the dependencies and start the app

Now let us start by installing the React router library React Router

$ pnpm add react-router-dom

Let us create a page. Create a folder called pages in scr and called it HomePage.tsx. Then paste the following

function HomePage() {
    return (
        <div>
            <h1>Home Page</h1>
        </div>
    );
}

export default HomePage;

Now, on our App.tsx
We need to write the following

import './App.css'
import { createBrowserRouter,RouterProvider} from "react-router-dom";
import HomePage from "./pages/HomePage";
function App() {
  const router = createBrowserRouter([
    { 
      path: "/",
      element: <HomePage/>
    },
  ]);
  return (
    <RouterProvider router={router}/>
  )
}

export default App

Now when someone visits our http://localhost:5173/ they will be greeted with this page.

Now, in your application. You May have an overall layout comprising a design that your want other pages to wrap around this. Let me show you how we can do it.
Create a folder called components and add a file called layouts.component.tsx

import { OutLet } from `react-router-dom`;
function LayoutsComponent() {
    return (
        <div>
            <h1>This is the overall layout</h1>
            <Outlet/>
        </div>
    );
}

export default LayoutsComponent;

Let us create two pages UsersPage.tsx and ProductsPage.tsx. Now add some dummy data and we import them in our App.tsx
Now with this, we need to wrap our app with this layout.
In our App.tsx page:

import './App.css'
import { createBrowserRouter,RouterProvider} from "react-router-dom";
import HomePage from "./pages/HomePage";
import LayoutsComponent from './components/layouts.component';
import UsersPage from './pages/UsersPage';
import ProductsPage from './pages/ProductsPage';
function App() {
    const router = createBrowserRouter([
        { 
            path: "/",
            element: <HomePage/>,
        },
        {
            element: <LayoutsComponent/>,
            children: [
                {
                path: "/users",
                element: <UsersPage/>,
                },
                {
                path: "/products",
                element: <ProductsPage/>,
                },
            ],
        }
    ]);
    return (
        <RouterProvider router={router}/>
    )
}

export default App

From above, we have just passed the <UsersPage/> and <ProductsPage/> as children to the <LayoutsComponent/> page, now they will wrap inside.

Now, in the Layouts component, you might want to pass data to every child component that might be wrapping inside it. This might come in handy, for example when you are designing for responsive view and you want to pass data to its children to respond a certain way when the layout changes. To do this we will us a special hook called useOutletContext() but before we do this, in the layout.component.tsx let us pass some data to the children.

import { useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
function LayoutsComponent() {
    const [data,setData] = useState([]);
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(json => setData(json))
    },[])
    return (
        <div>
            <h1>This is the overall layout</h1>
            <Outlet context={[data]} />
        </div>
    );
}

export default LayoutsComponent;

From our example, we have just updated our application import and now the data will be used my the children here.
Now to consume the data in our children(UsersPage):

import { useOutletContext } from "react-router-dom";
function UsersPage() {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [ data  ]= useOutletContext<[string[]]>();
    return (
        <div>
            <h1>Users Page</h1>
            <ul>
                {data.map((item,index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

export default UsersPage;

Now let us spice things up. You may want to introduce a loader, such that before we view a user information, before we view navigate to the user's profile page. To do this we write the following

{
    path: "/users",
        element: <UsersPage/>,
    children: [
            {
                 path: ":id",
                 element: <UserProfile/>,
                 loader: async ({ params }) => {
                const response = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`);
                const data = await response.json();
                return data;
                  }
            },
       ],
},

From this, you can choose to display the user data information

import { useLoaderData } from "react-router-dom";
function UserProfile() {
    const data= useLoaderData();

    return (
        <div>
            <h1>User Profile</h1>
            <p>{data}</p>
        </div>
    );
}

export default UserProfile;

Feel free to check the original documentation Docs

File download in React Native and Expo

Oliver Kem — Sat, 20 May 2023 12:12:01 +0000

Hello, today I am going to show us how you can can save files in React Native. If you are fetching a file from the backend server through an API endpoint, you will need to find a way to save the files to your phone. With this, you will have to figure out how you can handle permissions to access the files. I want to show you how you can handle permissions in React Native. I am using Expo.
After trying rn-fetch-blob and other libraries, I found out that they are not compatible with expo. (Only React Native CLI)

We have to consider about file system access and permissions.
After setting up a React Native Application and Adding a button. Let as get started, go to your terminal then type:

yarn add axios

I will be using axios to fetch the resource. Since expo is so strict with installing some files, I will be installing the libraries using expo. We are going to install expo-file-system library.

npx expo install expo-file-system

Then go to your file, and import the library

import * as FileSystem from 'expo-file-system';

Now, we write a function to fetch the resource.

async function fetchReportForm(fileType: string){

        axios.post(`https://resource.url`).then(async(res)=>{
            const pdfData = res.data;
        })
        .catch((err)=>{
            Alert.alert('Error','Error Downloading File!!')
        })
}

Now, we write a function to fetch the resource that helps us with file permissions.

const requestFileWritePermission =async () => {
        const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
        console.log(permissions.granted);
        if (!permissions.granted) {
                     Alert.alert('Error','File Permissions Denied')
            return {
                access: false,
                directoryUri: null
            };
        }
        return {
            access:true,
            directoryUri: permissions.directoryUri
        };
    }

With this, the user will be prompted with a request for directory to download the file, it then returns an object with the directory uri to save the file to. Now, we will be using thi directory uri to save the file.
Now let's write a function to help us save the file to our file system.

import * as FileSystem from 'expo-file-system';
const saveReportFile = async (pdfData: any,directoryUri: string)=>{
        try {
            await FileSystem.StorageAccessFramework.createFileAsync(directoryUri, 'My_file', 'application/pdf')
            .then(async(uri) => {
                await FileSystem.writeAsStringAsync(uri, pdfData, { encoding: FileSystem.EncodingType.Base64 });
            }).then(res=>{
                console.log(res)
                Alert.alert('Success', `File Saved`)
            })
            .catch((e) => {
                console.log(e);
            });
        } catch (error) {
            Alert.alert('Error',`Could not Download file ${error.message}`);
        }
    }

The function takes 2 inputs pdfData and the directoryUri to save the file. I passed the My_file as the file name.
Now, let us bundle up the whole code.

const requestFileWritePermission =async () => {
        const permissions = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
        console.log(permissions.granted);
        if (!permissions.granted) {
            console.log('File write Permissions Denied!!')
            return {
                access: false,
                directoryUri: null
            };
        }
        return {
            access:true,
            directoryUri: permissions.directoryUri
        };
}
const saveReportFile = async (pdfData: any,directoryUri: string)=>{
        try {
            await FileSystem.StorageAccessFramework.createFileAsync(directoryUri,'My_file', 'application/pdf')
            .then(async(uri) => {
                await FileSystem.writeAsStringAsync(uri, pdfData, { encoding: FileSystem.EncodingType.Base64 });
            }).then(res=>{
                console.log(res)
                Alert.alert('Success', `File Saved`)
            })
            .catch((e) => {
                console.log(e);
            });
        } catch (error) {
            Alert.alert('Error',`Could not Download file ${error.message}`);
        }
    }
    async function fetchReportForm(fileType: string){
        console.log('Attempting to Download file: ', fileType,'Report is',reportToDownload.stream);
        axios.post(``).then(async(res)=>{
            const pdfData = res.data;
            const hasPermissions = await requestFileWritePermission();
            if (hasPermissions.access) {
                saveReportFile(pdfData, hasPermissions.directoryUri)
            }
        })
        .catch((err)=>{
            console.log(err)
            Alert.alert('Error','Error Downloading File!!')
        })
    }

With this, you are done.
Gracias, see you soon.

Integrating Credentials Provider with NextAuthJS and MongoDB with Typescript - Part 2

Oliver Kem — Thu, 27 Apr 2023 19:07:41 +0000

Now, we work on the client side, in the client side, we will be handling how we can protect routes and how we can interact with the logged in user through an active session. With that, let's start.
From part 1 Part 1 we were done with returning the logged in user information (id, name and email) We will now use this in the frontend

Let's handle with the sign up functionality. From our frontend, sign up page let's start

import React, { SyntheticEvent, useReducer } from 'react';
import { signIn } from 'next-auth/react';
function FormComponent() {
    const handleFormSubmit = async (e: SyntheticEvent)=>{
        e.preventDefault();
        const { password, ...others } = state;
        if (password !==others['confirm-password']) {
            dispatch({name:'response',value:{code:401,message:"Passwords don't match!!"}})
        }
        type sentResponse = Omit<FormComponents,'confirm-password'|'response'| 'passwordType'>
        const sendingResp: sentResponse = {
            name: state.name,
            email: state.email,
            password: state.password,

        }
        const res = await fetch('/api/auth/sign-up',{
            method: 'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body: JSON.stringify({...sendingResp})
        })
        const data = await res.json();
        console.log(data.message,res.status);
        if (res.status===(200| 201)) {
            //sign in the user
            const status = await signIn('credentials', {
                redirect: false,
                email: state.email,
                password: state.password
            })
            console.log(status);
        }

        dispatch({name:'response',value:{code:res.status,message:data.message}})
    }
    type FormComponents={
        name: string
        email: string
        password: string
        response: {
            code: number,
            message: string
        }
    }
    const formVals: FormComponents={
        name: '',
        email: '',
        password: '',
        'confirm-password': '',
        response: {
            code: 0,
            message: ''
        },
    }
    function signInReducer(prev: FormComponents,next: {name :string,value: string | {code:number,message:string} | boolean}) {
        return {
            ...prev,
            [next.name]: next.value
        }
    }
    const [state,dispatch] = useReducer(signInReducergit,formVals)
    function handleOnChange(e: React.FormEvent<HTMLInputElement> | React.FormEvent<HTMLSelectElement>){
        if (e.target instanceof HTMLSelectElement) {
            dispatch({name: e.target.name,value: e.target.value})
           return;
        }
        const {name,value} = e.target as HTMLTextAreaElement
        dispatch({name: name ,value: value})
    }

    return (
        <>

            <div className={styles.form_container}>
                <form className={styles.form} onSubmit={handleFormSubmit}>
                    <p style={{fontWeight: 'bold', fontSize: '20px'}}>Create an Account Today!!</p>
                    {
                        state.response.message?(
                            <p  className={state.response.code===201? styles.success_message:styles.failure_message}>{state.response.message}</p>
                        ):''
                    }
                    <div className={styles.form_element}>
                        <label>Name</label>
                        <input name='name' value={state.name} required type="text" onChange={handleOnChange} />
                    </div>
                    <div className={styles.form_element}>
                        <label>Email</label>
                        <input name='email' value={state.email} required type="email" onChange={handleOnChange}/>
                    </div>

                    <div className={styles.form_element}>
                        <label >Password</label>
                        <input name='password' value={state.password} required type="password" onChange={handleOnChange} />
                    </div>
                    <div className={styles.form_element}>
                        <label>Confirm Password</label>
                        <input name='confirm-password' value={state['confirm-password']} required type="password" onChange={handleOnChange} />
                    </div>

                    <input required type="submit" value="SIGN UP" />
                </form>
            </div>
        </>
    );
}

export default FormComponent;

We have just handled the sign up component. We are using useReducer in react where we store user state (user information) from the state, after that, we send a post request to the backend router /api/auth/sign-up page, the file will now be executed.
After a positive response from the server i.e the response is of type 200 status code, we now proceed to sign in the user. We have just imported the signIn function from the next-auth library.

When we sign in, next-auth will now be responsible with storing the user session, this is amazing because we don't have to use a state management tool to store the user information. next-auth handles that for us THIS IS AMAZING

Now let's proceed with the login functionality.

async function handleSignIn(e: SyntheticEvent){
        e.preventDefault();
        const status = await signIn('credentials',{
            redirect: false,
            email: state.email,
            password: state.password
        })
        console.log(status)
 }
<form onSubmit={handleSignIn}>
                    <p >Already have an Account? </p>
                    <div >
                        <label>Email</label>
                        <input name='email' value={state.email} required type="email" onChange={handleOnChange}/>
                    </div>
                    <div className={styles.form_element}>
                        <label>Password</label>
                        <input name='password' value={state.password} required type={state.passwordType?'text':'password'} onChange={handleOnChange} />
                        <p onClick={()=>dispatch({name:'passwordType', value: !state.passwordType})}  style={{cursor:'pointer',display:'inline-block'}}>show</p>
                    </div>
                    <input onClick={handleSignIn} type="submit" value="SIGN IN" />
                    <input style={{color: 'white', background:'blue'}} required type="submit" value="SIGN IN WITH GOOGLE" />
</form>

This session of code is self explanatory, upon sign in, the [...nextauth.ts] file will be executed, this will now be responsible for signing in our user. Amazing

Now, let's handle how we can protect some route. In our Navigation, we would wish to protect a link to a route i.e user dashboard

import Link from "next/link";
import React from "react";
import Image from "next/image";
import { useSession } from "next-auth/react";
import { signOut } from "next-auth/react";
function NavComponent() {
    const {data: session} = useSession();
    return(
        <header>
            <h1>My App</h1>
            <nav >
                <ul >
                    <li>
                        <Link href='/'>Home</Link>
                    </li>

                    <li>
                        <Link href='/partners'>Partners</Link>
                    </li>
                    {
                        session && (
                            <li>
                                <Link href='/my-dashboard'>My Dashboard</Link>
                            </li>
                        )
                    }
                    {
                        session && (
                            <li>
                                <Link href='/doctor-dashboard'>My Dashboard</Link>
                            </li>
                        )
                    }
                    <li>
                        <Link href='/contact'>Contact Us</Link>
                    </li>
                </ul>
                <div >
                    {
                        session && (
                            <div >
                                <Image src='/images/cart.webp' alt="image" />
                                <div>
                                    <h4>{session.user?.name}</h4>
                                    <p>{session.user?.id}</p>
                                </div>
                            </div>
                        )
                    }
                    {
                        !session && (
                            <button >
                                <Link href='/auth'>Login/Register</Link>
                            </button>
                        )
                    }
                    {
                        session && (
                            <button onClick={()=>signOut()} >
                                Logout
                            </button>
                        )
                    }
                    {
                        session && (
                            <button>Book Appointment</button>
                        )
                    }
                </div>
            </nav>
        </header>
    )
}
export default NavComponent;

With this navigation component, we have protected the user Dashboard. We also want to display a user image and name when there's an active session. next-auth also provides a sign out library function where we can log out our user easily.

Now for our final part, let's protect a user page. It's always good to protect a page containing user information page

import React from 'react';
import Link from 'next/link';
import { getSession } from 'next-auth/react';
function DoctorDashboard() {
    const [toogle, setToogle] = React.useState(false);
    const handleClick = () => {
        setToogle(!toogle);
    }
    return (
        <>
            <div style={{margin: '20px'}}>
               <h1> User information dashboard</h1>
            </div>
        </>
    );
}
export async function getServerSideProps(context: GetServerSidePropsContext){
        const session= await getSession(context);
        if (!session) {
            return{
                redirect:{
                    destination:'/auth',
                    permanent: false
                }
            }
        }
        //Do your logic e.g fetching a user information from the // backend to retrieve information
        return{
            props:{
                //data
            }
        }
  }

export default DoctorDashboard;

From this section of code, when a user navigates to this route and he/she isn't logged in (no active session), they are being redirected back to the /auth page, amazing. This is just amazing.

And with this we are done with our two sections we are done.
For more information, find everything from the official documentation. Next Auth Docs

Implementing Login with Metamask, send Ether, user registration using React, NodeJS, Sequelize and GraphQL

Oliver Kem — Mon, 17 Apr 2023 12:22:41 +0000

## In this Project we are going to learn how you can implement a login functionality using React on frontend NodeJS backend with GraphQL and stores data on an SQL database. When creating DAPPs there’s always a need to implement functionality where users can login there metamask account to your applications once they are registered.

In this article, we will be generating JWT tokens to allow users to access protected routes in NodeJS.

Let’s look at the authentication flow in the image below.

Prerequisites

NodeJS
React
Metamask

So, let’s get started. Go to your terminal, create a new folder name it any name you like. I’ll call it web3-login.

pnpm create vite@latest 
code web3-login

Now in this folder, let’s create another directory here, call it backend, and install a couple of dependencies:

mkdir backend
cd backend
npm init -y
npm i bcryptjs web3 ethereumjs-util uuid express sequelize jsonwebtoken
npm i express-graphql graphql sqlite3
npm i -D nodemon
mkdir graphql
mkdir database models 
cd graphql && mkdir resolvers && mkdir schema

Now, on your frontend run the following in terminal:

npm i @metamask/detect-provider web3

Your folders should look like this:

Now, in your backend directory, make a new file. call it index.js. type in the following lines of code:

const express = require('express');
const {graphqlHTTP} = require('express-graphql');
// we will make this folder. Keep following
const graphqlSchema = require('./graphql/schema/schema.graphql');
const graphqlResolver = require('./graphql/resolvers/resolvers.graphql.js');
const sequelize = require('./database/db');

const app = express();
app.use(express.json());
// you can also use the CORS library of nodejs
app.use((req, res, next)=>{
    res.setHeader("Access-Control-Allow-Origin","*");
    res.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS");
    res.setHeader("Access-Control-Allow-Headers", 'Content-Type, Authorization');
    if(req.method ==="OPTIONS"){
        return res.sendStatus(200);
    }
    next();
});
// creates a graphql server
app.use('/users',graphqlHTTP({
    schema: graphqlSchema,
    rootValue: graphqlResolver,
    graphiql: true
}))
sequelize
.sync()
.then(res=>{
    // only connects to app when
    app.listen(4000,()=>{
        console.log("Backend Server is running!!");
    })
})
.catch(err=>console.error);

Now, go to your database folder. create a new file. call it db.js. copy and paste this line of code. Also create a new file with the .sqlite extension. e.g. db.sqlite

const sequelize = require('../database/db');

const { DataTypes } = require('sequelize');
const User = sequelize.define('Users', {
    id: {
        type: DataTypes.UUIDV1,
        allowNull: false,
        primaryKey: true
    },
    email: {
        type: DataTypes.STRING,
        allowNull: false,
        unique: true
    },
    password: {
        type: DataTypes.STRING(64),
        allowNull: false
    },
    address: {
        type: DataTypes.STRING,
        allowNull: false,
        unique: true
    },
    nonce: {
        type: DataTypes.INTEGER,
        allowNull: false,
        unique: true
    },
},{
    timestamps: true
}
);
module.exports = User;

We’ll use the nonce parameter for cryptographic communication. We store the address of user for verification.

Now, go to your graphql/schema folder
Create a new file. call it graphql.schema.js
Paste in the following lines of code

const {buildSchema} = require('graphql');
//we build the schema here.
module.exports = buildSchema(`
    type User{
        id: ID!
        email: String!
        password: String
        address: String!
        nonce: Int!
    }
    input UserInput{
        email: String!
        password: String!
        address: String!
    }
    type AuthData{
        userId: ID!
        token: String!
        tokenExpiration: Int!
    }
    type Token{
        nonce: Int
    }
    type jwtToken{
        token: String,
        message: String
    }
    type RootQuery {
        loginMetamask(address: String!): Token!
        login(email: String!, password: String!): AuthData!
        signatureVerify(address: String!,signature: String!): jwtToken!
        users: [User!]
    }
    type RootMutation {
        register(userInput: UserInput): User!
    }
    schema {
        query: RootQuery
        mutation: RootMutation
    }
`);

Go to graphql/resolvers folder
Create a new file. call it graphql.resolvers.js
Let's start with user registration

const User = require('../../models/user.model.js');
module.exports = {
  //from our schema, we pass in the user email, password and address,
  // a nonce is generated
  register: (args) => {
      return User.create({
          id: uuid.v1(),
          ...args.userInput,
          nonce: Math.floor(Math.random() * 1000000)
      }).then(res=>{
          console.log(res);
          return res
      }).catch(err=>{
          console.log(err);
      })  
    },
}

Now, we go on the frontend:

return(
        <div className="login_metamask">
            <h1>Metamask</h1>
            <div className="success">
                <h3>Succcessfull Transaction</h3>
                <div className="animation-slider"></div>
            </div>
            <section className="metamask__action">
                <button onClick={Enable_metamask} className="enable_metamask">
                    <img src={require("../images/metamask.png")} alt="metamaskimage" />
                    <h2>Enable Metamask</h2>
                </button>
                <button onClick={send_metamask} className="enable_metamask">
                    <img src={require("../images/metamask.png")} alt="metamaskimage" />
                    <h2>Send Ether</h2>
                </button>
                <button onClick={Login_metamask} className="enable_metamask">
                    <img src={require("../images/metamask.png")} alt="metamaskimage" />
                    <h2>Login with Metamask</h2>
                </button>
                <button onClick={Logout_metamask} className="enable_metamask">
                    <img src={require("../images/metamask.png")} alt="metamaskimage" />
                    <h2>LOGOUT</h2>
                </button>
            </section>
        </div>
    )

Now, we need to enable meta mask. When you click the “ENABLE METAMASK” button, the code will run and pop up window will open. Key in your password.

import Web3 from "web3";
import detectEthereumProvider from "@metamask/detect-provider";
async function Enable_metamask(){
    const provider = await detectEthereumProvider();
    if (provider) {
        window.web3 = new Web3(provider);
        web3 = window.web3;
        ethereum = window.ethereum;
        const chainId = await ethereum.request({ method: 'eth_chainId' });
        const accounts  = await ethereum.request({ method: 'eth_requestAccounts' });
        account = accounts[0];
        console.log(chainId, accounts);
    }
}

Now, let’s implement the login with Metamask functionality:

async function Login_metamask(){
        //1. First we query for the user nonce in the backend passing in the user account address
        let requestBody={
            query: `
                query {
                    loginMetamask(address: "${account}"){
                        nonce
                    }
                }
            `
        }
        const handleSignMessage = (nonce, publicAddress) => {
            return new Promise((resolve, reject) =>
                web3.eth.personal.sign(
                    web3.utils.fromUtf8(`Nonce: ${nonce}`),
                    publicAddress,
                    (err, signature) => {
                        if (err) return reject(err);
                        return resolve({ publicAddress, signature });
                    }
                )
            );
        }
        //2. if metamask is enabled we send in the request
        if(web3 && ethereum && account){
            fetch('http://localhost:4000/users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(requestBody),
            })
            .then(res=>{
                if(res.status !== 200 && res.status !==201){
                    //3. if we get an error, respond error
                    throw new Error("Failed");
                }
                return res.json();
            })
            .then(data => {
                console.log(data);
                  //4.  we log retrieve the nonce
                const nonce = data.data.loginMetamask.nonce;
                console.log(nonce);
                if(nonce != null){
                    //5. we then generate a signed message. and send it to the backend
                    return handleSignMessage(nonce,account)
                    .then((signedMessage)=>{
                        console.log(signedMessage.signature)
                        requestBody = {
                            query: `
                                query {
                                    signatureVerify(address: "${account}",signature: "${signedMessage.signature}"){
                                        token
                                        message
                                    }
                                }
                            `
                        }
                        fetch('http://localhost:4000/users', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(requestBody),
                        })
                        .then(response =>{
                            if(response.status !== 200 && response.status !==201){
                                throw new Error('Failed');
                            }
                            return response.json();
                        })
                        .then(data => {
                            console.log(data);
                        })
                        .catch(err=>console.error); 
                    })
                }else{
                    //Redirect the user to registration site.
                    console.log('Please Register at our site. ')
                }
            })
            .catch((error) => {
                console.error('Error encountered:', error);
            });
        }else{
            await Enable_metamask();
        }
    }

Now, on our backend we receive this request and process it:

const User = require('../../models/user.model.js');
function VerifySignature(signature,nonce) {
    const msg = `Nonce: ${nonce}`;
    //convert the message to hex
    const msgHex = ethUtil.bufferToHex(Buffer.from(msg));
    //if signature is valid
    const msgBuffer = ethUtil.toBuffer(msgHex);
    const msgHash = ethUtil.hashPersonalMessage(msgBuffer);
    const signatureBuffer = ethUtil.toBuffer(signature);
    const signatureParams = ethUtil.fromRpcSig(signatureBuffer);
    const publicKey = ethUtil.ecrecover(
        msgHash,
        signatureParams.v,
        signatureParams.r,
        signatureParams.s
    );
    const addressBuffer = ethUtil.publicToAddress(publicKey);
    const secondaddress = ethUtil.bufferToHex(addressBuffer);
    return secondaddress;
}
module.exports = {
  //from our schema, we pass in the user email, password and address,
  // a nonce is generated
    register: (args) => {
        return User.create({
            id: uuid.v1(),
            ...args.userInput,
            nonce: Math.floor(Math.random() * 1000000)
        }).then(res=>{
            console.log(res);
            return res
        }).catch(err=>{
            console.log(err);
        })  
    },
    loginMetamask: function({address}){
          return User.findOne({address})
          .then(user=>{
              if(!user){
                  // if user doesn't exit return null
                  return{
                      nonce: null
                  }
              }
              return {
                //else return the nonce of user
                  nonce: user.dataValues.nonce
              }
          })
          .catch(err=>{
              throw err;
          })
    },
    signatureVerify:async function({address, signature}){
            const user =await User.findOne({address});
            if(!user){
                return{
                    token: null,
                    message: 'User not Found. Sign In again'
                }
            }
            // then verify the signature sent by the user i
            let secondaddress = VerifySignature(signature,user.nonce)
            if(address.toLowerCase() === secondaddress.toLowerCase()){
                //change the user nonce
                user.nonce = Math.floor(Math.random() * 1000000);
                await user.save()
                const token = await jwt.sign({address: user.address,email: user.email},'HelloMySecretKey',{expiresIn: '1h'});
                return{
                    token: token,
                    message: 'User not Found. Sign In again'
                }
            }else {
                return{
                    token: null,
                    message: 'User not Found. Sign In again'
                }
            }
    },
}

From this, a json web token will be returned to the client. We can use this to authenticate to protected routes on our server. Now, for user experience:

Wrapping Up

** This is just a simple authentication mechanism with Metamask yet effective.

Find thesource code on GitHub link:

https://github.com/OliverMengich/web3LoginSendEtherMetamask.git

Thank you.**

COMMON API VULNERABILITIES

Oliver Kem — Mon, 17 Apr 2023 10:53:47 +0000

When developing APIs for fortune 500 companies, developers often forget measures that ensure that their APIs don’t expose their data or the architecture of their backend. This measures are so simple to enforce but when neglected it leads to massive breaches of their APIs. for example, forgetting to enforce a rate limiting of reset password functionality which requires a 4-Pin digit code to verify can cause the hacker to end up trying all possible combination of the pin which takes up to 10,000 request. Or allowing an authenticated user to access other user’s data and to perform actions that only an administrator to the website can lead to massive breaches.

In this blog, I’ll walk you through 8 of the OWASP TOP 10 vulnerabilities and how we can avoid them.

1. Broken Object Level Authorization Vulnerability

Occurs when an API provider allows an API consumer to access
resources they are not authorized to access. If an API endpoint
does not have object-level access controls, it won’t perform
checks to make sure users can only access their own resources.
When these controls are missing, User A will be able to
successfully request User B’s resources. APIs use some sort of
value, such as names or numbers, to identify various objects.
When we discover these object IDs, we should test to see if we
can interact with the resources of other users when
unauthenticated or authenticated as a different user. For
instance, imagine that we are authorized to access only the
user Cloud Strife. We would send an initial GET request to
https://mywebsite.com/api/users?id=100 and receive the following response

{

“id”: “100”,

“first_name”: “Jane”,

“last_name”: “Doe”,

}

But looking at the id, which is 100, Say we are able obtain information about another user by sending a request for https://mywebsite.com/api/users?id=101 and receiving the following response

{

“id”: “101”,

“first_name”: “John”,

“last_name”: “Doe”,

}

This vulnerability is also called an IDOR. We can avoid this type of vulnerability by changing the primary key of the user, for example, the id and generating random characters or that are unique identifiable to a specific user

2. Information Disclosure

When an API responds with sensitive information with unprivileged users, this is called information disclosure vulnerability. Sensitive data can include any information that attackers can leverage to their advantage. This sensitive data may include the users’ role. For instance, consider the following request:

{“id”:2,”name”:”Vincent Valentine”, “role”:”admin”}

Information may be disclosed in API responses or public sources such as code repositories, search results, news, social media, the target’s website, and public API directories.

Another common information disclosure issue involves verbose messaging. This might include Error messages. These messages can reveal sensitive information about resources, users, and the API’s underlying architecture (such as the version of the web server or database). For example, say you attempt to authenticate to an API and receive an error message such as “Invalid User ID” Next, say you try another email, the error message changes to “incorrect password.” This lets you know that you’ve provided a legitimate user ID for the API. The attacker can then conduct a phishing attack with the user email.

3. Excessive Data Exposure

Excessive data exposure is when an API endpoint responds with more information than is needed to fulfill a request. When a consumer requests specific information, the provider might respond with all sorts of information, assuming the consumer will then remove any data they don’t need from the response. This vulnerability is equivalent to asking someone for their name and having them respond with their name, date of birth, email address, phone number, and the identification of every other person they know. Consider the following response:

{

“id”: “100”

“first_name”: “John”

“last_name”: “Doe”,

“privilege”: “user”,

“representative”: [

“name”: “Don Corneo”,

“id”: “300”

“email”: “dcorn@gmail.com”,

“privilege”: “super-admin”

“admin”: true

“two_factor_auth”: false

]

}

Excessive data exposure is one of those awesome API vulnerabilities that bypasses every security control in place to protect sensitive information and hands it all to an attacker on a silver platter simply because they used the API. All you need to do to detect excessive data exposure is test your target API endpoints and review the information sent in response

4. Lack of Resources and Rate Limiting

Without limiting the number of requests consumers can make, an API provider’s infrastructure could be overwhelmed by the requests which could lead to a DOS attack. Too many requests without enough resources will lead to the provider’s systems crashing and becoming unavailable — a denial of service (DoS) state. Besides potentially DOS-ing an API, an attacker who bypasses rate limits can cause additional costs for the API provider. Many API providers monetize their APIs by limiting requests and allowing paid customers to request more information. Some API providers also have infrastructure that automatically scales with the quantity of requests. In these cases, an unlimited number of requests would lead to a significant and easily preventable increase in infrastructure costs.

An attacker can you bypass rate limiting by adding or removing a parameter, using a different client, or altering your IP address

5. Broken Function Level Authorization

Broken function level authorization (BFLA) is a vulnerability where a user of one role or group can access the API functionality of another role or group. In other words, BFLA can be a lateral move, where you use the functions of a similarly privileged group, or it could be a privilege escalation, where you are able to use the functions of a more privileged group. Particularly interesting API functions to access include those that deal with sensitive information, resources that belong to another group, and administrative functionality such as user account management.

BFLA is an authorization problem for performing actions. For example, consider a vulnerable banking API. If a BFLA vulnerability is present, you might be able to transfer money and update the account information. BFLA is about unauthorized actions. If an API has different privilege levels or roles, it may use different endpoints to perform privileged actions. For example, a bank may use the /{user}/account/balance endpoint for a user wishing to access their account information and the /admin/account/{user} endpoint for an administrator wishing to access user account information.

If the application does not have access controls implemented correctly, we’ll be able to perform administrative actions, such as seeing a user’s full account details, by simply making administrative requests.

Solving the problem by specifying in the user access token that defines the role of the users or user and restricting the HTTP methods a consumer can use, simply making an unauthorized request with a different method could indicate a BFLA vulnerability. These two methods can help prevent a BFLA vulnerability.

6. Broken User Authentication

These vulnerabilities occurs when an API does not have a strong authentication protection mechanism or the authentication mechanism is incorrectly configured. API authentication can be a complex system that includes several processes with a lot of room for failure. As developers, we often pass authorization tokens through HTTP headers of even request parameters and store then in the client side(browser) as cookies. An attacker can detect hardcoded tokens and once he finds the token, he can use it to gain access to previously hidden endpoints or to bypass detection.

The other authentication processes that could have their own set of vulnerabilities include aspects of the registration system, such as the password reset and multifactor authentication features. For example, Consider a password reset feature requires you to provide an email address and a 4-digit verification code to reset your password. Well, if the API allowed you to make as many requests as you wanted, you’d only have to make one million requests in order to guess the code and reset any user’s password. A four-digit code would require only 10,000 requests.

These however can be corrected by:

Rate limiting when authenticating
Avoid over exposure and verbose error messaging
Accessing resources after authenticated

For example, code committed to a GitHub repository could reveal a hardcoded admin API key:

“oauth_client”: [

{

“client_id”: “12345-abcd”,

“client_type”: “admin”,

“api_key”: “AIzaSyDrbTFCeb5k0yPSfL2heqdF-N19XoLxdw”

}

]

Due to the stateless nature of REST APIs, a publicly exposed API key is the equivalent of discovering a username and password. By using an exposed API key, you’ll assume the role associated with that key.

7. Injections

Injection flaws exist when a request is passed to the API and the API provider doesn’t do filter the input to remove unwanted characters. This flaw can cause SQL injection, NoSQL injection, and system command injection to your database and even backend infrastructure. If an send a payload containing SQL commands to a vulnerable API that uses a SQL database, the API will pass the commands to the database, which will process and perform the commands. The same will happen with vulnerable NoSQL databases and affected systems.

8. Improper Assets Management

Improper assets management takes place when an organization exposes APIs that are either retired or still in development. Improper assets management can lead to other vulnerabilities, such as excessive data exposure, information disclosure, mass assignment, improper rate limiting, and API injection. For attackers, this means discovering an improper assets management vulnerability is only the first step toward further exploitation of an API. An attacker can discover improper assets management by paying close attention to outdated API documentation, changelogs, and version history on repositories. Developers often include versioning information in their endpoint names to distinguish between older and newer versions, such as /v1/, /v2/, /v3/, and so on. APIs still in development often use paths such as /alpha/, /beta/, /test

References

Hacking APIs: Breaking Web Application Programming Interfaces by Corey Ball. https://nostarch.com/hacking-apis

Displaying dynamic JSON data in GatsbyJS

Oliver Kem — Sat, 15 Apr 2023 06:40:51 +0000

GatsbyJS is an amazing tool to help leverage when building website. GatsbyJS offers amazing features like the built in GraphQL tool to help in queries for files inside the filesystem and retrieve data without the need of reading the data. This is an amazing feature in terms of optimized application performance. GraphQL also offers libraries like gatsby-source-dev that helps retrieve data from the Dev.to website.
In a later session, I will show us how to fetch data from dev.to using markdown feature. For today, let us learn how we can use gatsby-transform-json to retrieve data and display it in our application.

Prerequisites

Javascript
Knowledge with React
Typescript (But not necessary)
GatsbyJS (But not necessary)

With this information. Let's dive into it

We first need to initiialize an new application. Let's go into our terminal and run the following command.

$ npm init gatsby

This this in your terminal and follow the prompt. I am using the src directory because I find it awesome having all files in one folder.
I am creating my portfolio website and I want to display the list of projects I have done in my projects page.

$ cd my-portfolio
$ npm run develop

This spins up a server in localhost:8000 and a Graphql server at localhost:8000/__graphql

I had already set up my project before. Just create a folder inside the src and name it projects. Then add a folder called images inside and a file called products.json. When you create a new gatsby project, it comes with some default plugins contained in the gatsby-config.ts file. Let's take a look at it

When you Query for the site's metadata, it is returns the title and siteurl, but we will not look at that.
Inside the plugins' array, there are default plugins like "gatsby-plugin-mdx", gatsby-plugin-sharp", "gatsby-transformer-sharp" that comes preinstalled.
But for us, we will need to interact with our json data. So we need to add a few new plugin called gatsby-transformer-remark and gatsby-transformer-json. These libraries help us interact with the JSON data.
Go to your terminal and run the following

$ npm install gatsby-transformer-remark gatsby-transformer-json

Once installed, add this to your gatsby-config.ts file.

Now we are all set. But there's one more thing to add. We need to give our GraphQL server permission to access the projects folder we created. So lets do that. Inside our gatsby-config.ts, add the following

{
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "projects",
      "path": "./src/projects/"
    },
    __key: "projects"
  },

Now, it can access the projects folder. Your code should be like this

Now, let's add a files inside the projects folder called projects.json and will store our projects information, let's add some info. Let's also create a file called images inside the projects folder. We will store images for our projects here.
projects/images

src/projects/projects.json


[
    {
        "title":"Project 1",
        "description":"My first project",
        "imageUrl":"./images/image1.png",
        "url":"https://example.com/image1.png"
    },
    {
        "title":"Project 2",
        "description":"My second project",
        "imageUrl":"./images/image2.png",
        "url":"https://example.com/image2.png"
    },
]

With this in set, let's go on and start working on our code.

Go to the terminal and spin up your development server

$ npm run develop

GatsbyJS spins up a development server at localhost:8000 where you can view your app. GatsbyJS also offers a GraphQL playground where you can interact with your files in your projects, this is amazing because it helps interact with files and at the same times Gatsby offers other plugin libraries e.g gatsby-source-devand gatsby-source-hashnode which helps fetch from Dev.to and Hashnode, API to fetch for blog posts, but these two are just to name a few, you can search for all plugins

To view your GraphQL playground go to localhost:8000/___graphql

When you visit through this url, you find a nice graphql playground. With this playground, you can query for information and files in your folder, this is amazing.

You will also see allProjectsJson, this of course depends on what you named your json file, but with this, you can query for information in your json file. I will be adding a file called projects.tsx in my application. This will be the route for my application's projects page.

Now let's query for some stuff

We've just query for the information in our file. When we type in the query, we get some information.

Let's now add this to our project's file.
Go to your projects.tsx file and write this

import * as React from "react"
import { HeadFC, PageProps, useStaticQuery, graphql } from "gatsby"
import ProjectsList from "../components/Projects/Projects.component";
import Footer from "../components/Footer/Footer.component";
const IndexPage: React.FC<PageProps> = () => {
    const data = useStaticQuery(graphql`
        query MyQuery {
        allProjectsJson {
            edges {
                node {
                    id
                    title
                    description
                    url
                    imageUrl {
                        childImageSharp {
                            fluid(maxWidth: 700) {
                                srcSet
                                src
                                base64
                                aspectRatio
                                sizes
                            }
                        }
                    }
                }
            }
        }
    }
    `)
    console.log(data);
    return (
        <Layout>
            <PageInfoComponent title="Projects" path="projects"/>
            <ProjectsList
                projects={data.allProjectsJson.edges}
            />
            <Footer/>
        </Layout>
    )
}

export default IndexPage

export const Head: HeadFC = () => <title>Projects </title>

Now in our Projects.component.tsx file, let's add the following line of code.
So here, Loop through the information provided and display them here.

import React from 'react';
import styled from 'styled-components';
import Image from 'gatsby-image';


type ProjectsListProps = {
    projects: any[],
};
function ProjectsList({projects, theme}: ProjectsListProps) {
    return (
        <>
            {
                projects.map((edge: any) => (
                    <div 
                       key={edge.node.id}>
                        <h1>{edge.node.title}</h1> 
                        <Image fluid={edge.node.imageUrl.childImageSharp.fluid} alt={edge.node.title} />
                        <p style={{
                            color: theme?.color
                        }}>
                            {edge.node.description}
                        </p>
                        <a href={edge.node.url}>Learn More </a>
                    </div>
                ))
            }
        </>
    );
}
export default ProjectsList;

The useStaticQuery is a hook that is used. The graphql allows us to query for the information. This is cool.
You can add your styling there to display the information.

Integrating Credentials Provider with NextAuthJS and MongoDB with Typescript - Part 1

Oliver Kem — Sat, 08 Apr 2023 08:45:43 +0000

Authentication and Authorization in modern application is very essentials because you are managing user data, but it can be a bit sketchy sometimes as we have to consider route protection, session management, protecting several routes/pages, password encryption, validating user's credentials during sign-up and sign-in.

Next Auth is an open source, free library that handles authentication tasks for the developer like JWT, cookie. It also enables OAUTH2.0 providers like Twitter, GitHub, Google, Facebook and Discord.

Next Auth handles session management and this improves the security of your application by implementing built in security features so that the server can't be tricked easily

In this tutorials, we are going to look at how to implement email password authentication on users' credentials like email and password.

    * [Create NextJS App](#chapter-1)
    * [Installing Dependencies](#chapter-2)
    * [User Sign Up](#chapter-3)
    * [Sign In](#chapter-4)

Packages to Install

mongoose
next-auth
bycryptjs

Creating The NextJS Application

I will be using pnpm but be free to use npm if you like. Go to your terminal and run the following line of code

$pnpm create next-app --typescript

We Initialize the application with typescript
Follow the Prompt on the command line to create the NextJS Application. I will not be using the app directory that comes with NextJS 13, I will also be using the src directory with NextJS, but fill free to use it to your own liking.

Installing Dependencies

After successfully creating the nextJS application, we install the dependencies, go to your terminal and run

$pnpm add mongoose next-auth bcryptjs

We will be using a local instance of mongodb server, so we fetch the URL
I will not show how to install mongodb on your pc, feel free to use the database you like
Create a .env.development file in the root folder, then paste the following line of code
MONGODB_URL="mongodb://localhost:27017/test_db"

Model and Controller

NextJS provides us to write API codes in the pages/api folder using the NodeJS environment. It will also follow the same folder-structured route. Create a folder in the api folder and call it auth. Create a route pages/api/auth/sign-up.ts. We also need to make sure that only the POST method is accepted and nothing else.

But before we start working the the route, let's create a user model that we can use to define the components of user
Create a folder called utils. Inside the folder, create a file called user.model.ts. Then paste the following line of code

import mongoose, { Document } from 'mongoose';

const userSchema = new mongoose.Schema({
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      required: true,
    },
    email: {
      type: String,
      required: true,
      unique: true,
    },
    password: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
);

export interface IUser extends Document {
    name: string;
    age: number;
    email: string;
    password: string;
    createdAt: Date;
    updatedAt: Date;
}
let UserModel: mongoose.Model<IUser>;
try {
  // Try to get the existing model from mongoose
  UserModel = mongoose.model<IUser>('User');
} catch {
  // If the model doesn't exist, define it
  UserModel = mongoose.model<IUser>('User', userSchema);
}
export default UserModel;

Here, we have defined the user model and its contents, we also export the user Interface so that we can use it somewhere else.

We also need to handle sign in to mongodb database. Let's create a file and call it db.ts. Paste in the following line of code

import mongoose from "mongoose";
//connect to mongodb
const connectionUrl = "mongodb://localhost:27017/test_db";
const connectDB = async () => {
    try {
        const conn = await mongoose.connect(process.env.MONGODB_URI||connectionUrl);
        console.log(`MongoDB Connected: ${conn.connection.host}`);
    } catch (err) {
        console.error('Error Encountered: ',err);
        process.exit(1);
    }
};
export default connectDB;

Now lets create a controller file inside the utils folder, name it user.controller.ts. Now lets paste the following code.

import UserModel from './user.model';
type UserX = Omit<IUser,  | 'createdAt' | 'updatedAt' >;
export const createUser = async (user: UserX) => {
    console.log('Request to add user: ', user)
    console.log(await connectDB());
    const userAdded: UserX = {
        ...user,
        password: bcryptjs.hashSync(user.password, 10),
        userType: 'PATIENT',
    }
    console.log('Request to add user: ', userAdded);
    const finduser = await UserModel.findOne({
        email: userAdded.email
    });
    if(finduser) throw new Error("User Found, Change Email");
    const newUser = await UserModel.create(userAdded);
    return newUser;
}

We will use this controller file to sign up to our application. Now back to our sign-up.ts file, we need to handle this authentification, open the file and paste the following line of code


import type { NextApiRequest, NextApiResponse } from 'next';
import { createUser } from '../controllers/user.controller';
type Data = {
  message: string
}

export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
    if (req.method==='POST') {
        const {email, password, ...otherProps} = req.body;
        if (!email || !email.includes('@') || !password) {
            res.status(422).json({ message: 'Invalid Data' });
            return;
        }
        const data = await createUser({email, password, ...otherProps})
        if (!data) {
            res.status(422).json({ message: 'User already exists' });
            return;
        }
        // sign in the user
        res.status(201).json({ message: 'User created',...data });
        return
    }else{
        res.status(500).send({message:'Invalid Route'})
    }
}

We import our user controller file, this is where we will write our API. We destructure the email and password then validate if the user exists, if not we create the user, we then hash the password. If user exists, we throw the error.

Sign In

Now we need to handle the sign in route for the user.

Next-Auth provides us with Client API as well as REST API
The NextAuth.js client library makes it easy to interact with sessions from React applications.

NextAuth.js exposes a REST API which is used by the NextAuth.js client.
We will use both for signing in the users.

To add NextAuth.js to a project create a file called [...nextauth].ts in pages/api/auth.

All requests to /api/auth/* (signin, callback, signout, etc) will automatically be handed by NextAuth.js.

Before we will need to handle the sign in the user, so we should update our controller file

export const getUserByEmail = async (email: string) => {
    const user: UserX | null = await UserModel.findOne({
        email
    });
    if(!user) throw new Error("No User Found");
    return user;
}

With this help from next-auth, we need to implement our own sign-in logic for checking users stored on the database.

In the [...nextauth].ts file, paste in the following lines of code. I will walk you write through it.

import NextAuth, {NextAuthOptions, Session, User} from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { getUserByEmail } from '../controllers/user.controller';
import { IUser } from '../users';
import bcrypt from 'bcryptjs';
import { NextApiHandler } from 'next';
import { getDoctorByStaffID } from '../controllers/doctor.controller';
interface Credentials{
  email: string;
  password: string;
}
export interface MySession extends Session{
    user:{
        id: string,
        name: string,
        email: string,
        phone: string,
        isAdmin: boolean,
        image: string
    }
}
interface MyUser extends User{
    id: string,
    name: string,
    email: string,
    phone: string,
    isAdmin: boolean,
}
export const options: NextAuthOptions = {
    session:{
        strategy: 'jwt',
    },
    callbacks: {
        async jwt({token, user}) {
            if (user) {
                token.user = user;
            }
            return token;
        },
        async session({ session,token }){
            if (token) {
                session.user = token.user as MyUser;
            }
            return Promise.resolve(session);
        },
    },
    secret: process.env.MONGODB_URI,
    providers: [
        Credentials({
            id: 'credentials',
            name: 'credentials',
            credentials:{
                email: {label:'email', type:'text',placeholder:''},
                password:{label:'password',type:'password'}
            },
            async authorize(credentials){
                const { email, password } = credentials as Credentials;
                const user: IUser| null = await getUserByEmail(email);
                if (!user) {
                    throw new Error("No User Found");
                }
                const isMatch = await bcrypt.compare(password, user.password);
                if (!isMatch) {
                    throw new Error("Password doesnt Match");
                }
                return {
                    id: user._id,
                    name: user.name,
                    email: user.email,
                };
            },
        })
    ],
}
const Handler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default Handler;

This code is compatible with NextAuth.js version 4. Here, we import the Credentials provider, this allows us to define a sign in with password and email. Inside the authorize() function we pass in the email and password we had defined as input. we then return the user information. In the callback functions, we have the session() and jwt() function. this takes in the user we had returned in the authorize() so we can define all this. We used type assertions for defining its return type.

In the next session, we will continue with the client side.

DEV Community: Oliver Kem

tRPC APIs - Part 2

Hello everyone!

Prerequisites

tRPC APIs - Part 1

Hello Devs.

Rest APIs

GraphQL

tRPC

Connecting React Native App to Crypto Wallet.

Prerequisites

React Router v6

Prerequisites

File download in React Native and Expo

Integrating Credentials Provider with NextAuthJS and MongoDB with Typescript - Part 2

Implementing Login with Metamask, send Ether, user registration using React, NodeJS, Sequelize and GraphQL

Prerequisites

Wrapping Up

COMMON API VULNERABILITIES

1. Broken Object Level Authorization Vulnerability

2. Information Disclosure

3. Excessive Data Exposure

4. Lack of Resources and Rate Limiting

5. Broken Function Level Authorization

6. Broken User Authentication

7. Injections

8. Improper Assets Management

References

Displaying dynamic JSON data in GatsbyJS

Prerequisites

Integrating Credentials Provider with NextAuthJS and MongoDB with Typescript - Part 1

Table Of Contents

Packages to Install

Creating The NextJS Application

Installing Dependencies

Model and Controller

Sign In