Forem: Fernando Amezcua

NodeJS OAuth2.0

Fernando Amezcua — Mon, 29 Aug 2022 14:09:00 +0000

Introduction

OAuth 2.0 is the successor to OAuth 1.0, and it's designed to work with HTTP, HTML5 and native mobile apps. It allows users to grant applications access to their data on other social networks like Facebook or Twitter (and even Slack), while keeping you in control of how much access is granted. In this article we'll look at how authentication works in OAuth 2.0 and what happens when a user grants an application permission to use their data. We'll also cover authorization parameters and how they're used by an application when making calls on behalf of another user.

OAuth 2.0 is the successor to OAuth 1.0, and is designed to work with HTTP, HTML5, and native mobile apps.

OAuth 2.0 can be used for authorization by a user agent (user browser) or as an authorizer for a service provider (service provider). The client application requests authorization from the server in order to access protected resources on behalf of the user; if successful, it may then use credentials issued by both the client application's own identity provider and any other third-party providers that have been authorized under this process (e.g., Google).

Authorization happens when you send a signed request and obtain an Access Token, it to make API calls on behalf of a user.

An access token is a string of characters that represents authorization. It's like an ID card, but it doesn't contain any personal information. When you send the signed request and obtain an access token from the authorization server, it means you're authorized to make API calls on behalf of a user.

It's good practice to ensure that users can revoke your application's access at any time.

To use OAuth 2 you need an authorization server that allows users to grant access from their accounts on behalf of third party applications such as yours. The service will check whether the requesting party has been authorized by the user before granting access—if not then they won't allow it!

Getting started
For practical purposes we are going to use a boilerplate created by wilsonwu, this boilerplate I consider is complete for understanding the OAuth protocol, but we are going to add some other cool stuffs to make an update example from library.

https://github.com/wilsonwu/express-oauth2-demo

Appwrites Health Service

Fernando Amezcua — Wed, 27 Oct 2021 16:51:11 +0000

Overview

The Health service is designed to allow you to both validate and monitor that your Appwrite server instance and all of its internal components are up and responsive.

Here, we are going to talk about how to use these services running on React Native in order to give a better idea about how we can implement in our own way.

Please, clone this dummy express api repository and install dependencies to follow this example.

Getting Started

We are going to work with two branches for this example.

QUICK NOTE

develop here, we have all the dummy example to follow this tutorial
appwrite-health-system, This branch contains all the complete example in case that you want to take a look to the complete example.

1. Install dependency
We are going to need install the package from appwrite core team:

npm install node-appwrite --save

2. Create SDK file
Create a new file src/config/index.js, this file will help us to create a connection between our express app and appwrite service.

const sdk = require('node-appwrite');

// Init SDK
let client = new sdk.Client();
let health = new sdk.Health(client);

client
  .setEndpoint('http://localhost/v1')
  .setProject('PROJECT_ID')
  .setKey('YOUR_API_KEY');

export {
  health,
  client,
}

3. Server file
For this we need install a bunch of packages, here I let you the command:

npm install compression router body-parser --save

Follow me to improve the server:

const compression   = require('compression')
const express       = require('express')
const app           = express()
const router        = express.Router()
const bodyParser    = require("body-parser")

app.use(compression())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: true
}))

app.disable('x-powered-by')
app.use(function(req, res, next){
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next()
})

router.use(function(req, res, next){
    console.log("[ API ] -> /" + req.method + ' -> ' + req.path)
    next()
})

const system_health = require('./routes/systemHealth')(router);

const port = process.env.PORT || 3000
app.use("/api", router)

app.use("*", function(req, res){
    res.status(404).json({status: 'ERROR', result: '404'})
})

app.listen(port, function(){
  console.log('[ API ] -> Server Ready: ' + port)
})

As we can see, now, we have a complete server for just add the routes. come on to the src/routes/systemHealth.js, on this file we need to create the logic for every route.

On the code's comments I will let you a little explanation that I got from the official documentation, in order that you identify the different cases.

const {
  client,
  health,  
} = require('../config')

module.exports = function (router){

  //* Check the Appwrite HTTP server is up and responsive.
  // This route is used to overview check the health of the system
  router.get('/health', (req, res, next) => {
    // This line contains the system modules that are being checked
    // It will be changed on every route
    let promise = health.get();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Check the Appwrite database server is up and connection is successful.
  router.get('/health/db', (req, res, next) => {
    let promise = health.getDB();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Check the Appwrite in-memory cache server is up and connection is successful.
  router.get('/health/cache', (req, res, next) => {
    let promise = health.getCache();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  /*
    Check the Appwrite server time is synced with Google remote NTP server.
    We use this technology to smoothly handle leap seconds with no disruptive events.
    The Network Time Protocol (NTP) is used by hundreds of millions of computers and devices to synchronize their clocks over the Internet.
    If your computer sets its own clock, it likely uses NTP.
  */
  router.get('/health/time', (req, res, next) => {
    let promise = health.getTime();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Get the number of webhooks that are waiting to be processed in the Appwrite internal queue server
  router.get('/health/webhooks', (req, res, next) => {
    let promise = health.getQueueWebhooks();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Get the number of tasks that are waiting to be processed in the Appwrite internal queue server.
  router.get('/health/queue/tasks', (req, res, next) => {
    let promise = health.getQueueWebhooks();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Get the number of logs that are waiting to be processed in the Appwrite internal queue server.
  router.get('/health/queue/logs', (req, res, next) => {
    let promise = health.getQueueLogs();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Get the number of usage stats that are waiting to be processed in the Appwrite internal queue server.
  router.get('/health/queue/usage', (req, res, next) => {
    let promise = health.getQueueUsage();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Get the number of certificates that are waiting to be issued against Letsencrypt in the Appwrite internal queue server.
  router.get('/health/queue/certificates', (req, res, next) => {
    let promise = health.getQueueCertificates();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* To access this route, init your SDK with your project unique ID and API Key secret token. Make sure your API Key is granted with access to the "health.read" permission scope.
  router.get('/health/queue/functions', (req, res, next) => {
    let promise = health.getQueueFunctions();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Check the Appwrite local storage device is up and connection is successful.
  router.get('/health/storage/local', (req, res, next) => {
    let promise = health.getStorageLocal();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });

  //* Check the Appwrite Anti Virus server is up and connection is successful.
  router.get('/health/anti-virus', (req, res, next) => {
    let promise = health.getStorageLocal();

    promise.then(function (response) {
      res.json(response);
    }, function (error) {
      res.json(error)
    });
  });
}

Summary

Now, you have a server to monitor all the services and if them are working good, this is very helpful. This kind of monitors help us to find faster solutions in our app. This hacktoberfest I've been touching Appwrite and I can say that is a tool that you should take a look as developer. Thank so much for read this little blogspot.

Full complete example

Next Steps

Create test files with chai.
Write a dictionary with all responses returned in every route.
Explain how to deploy it on a cloud service.

Appwrite + React Native

Fernando Amezcua — Tue, 26 Oct 2021 05:53:32 +0000

Overview

Like the official documentation says:

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

So, I feel great to say that I've been touching and testing this tool that is really amazing, this tool is too similar to Firebase features in my opinion. we can manage the database, storage, users and other cool features.

On this blogspot we are going to build a little app to demonstrate how it works with ReactNative.

Important
This tutorial is for mid level react native knowledge, so, for complete the main proposal of this tutorial we are not going to talk about the react native's installation. So, if you want to follow up this tutorial you should be have installed the next list:

Docker
React Native project running.
Git Cli

Getting started

Firstly, we are going to install appwrite backend server on the environment so, we need install the docker image on our computer. here I let you the command to run in one line.
currently we are using the version 0.11.0, review the official documentation to take the most recent version.

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.11.0

After this, we are already prepared to run create a new project backend as service project on the localhost, if we go to http://localhost we can see an sign up form in order to create a new root account.

Now, we can create a new project, just writing a name.

We are going to see a new dashboard panel with all features related with this awesome tool.

if you want to see a detailed view of every tool I invite you to see the official documentation on their website. here we have a little overview about everyone:

Database
Store, query and manage access control to your app documents

Storage
Upload, download and preview your app and users files and media

Users
Authenticate, confirm and manage your users using multiple signin methods

GEO & Localization
Detect your users location, locale and fetch GEO related data

Functions
Run your backend code in a secure and isolated environment to customize your app

Console
Track your backend API usage and manage your project resources from a modern UI

Privacy
Own your data. Easily setup Appwrite self-hosted solution on your infrastructure

Security
Built in end to end security for your backend API both in transit and at rest

For this tutorial we are going to cover the users creation in order to you can see how to easy we can use this service once we have already installed in our computers.

Users panel helps us to manage all the users on our app.

So, click on the users -> settings here, we can select or remove all the ways that you want sign in. for this case I will just active user/password sign in.

now, we can go to the react native project and let the App.js file like this:

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';

function App() {
  return <SafeAreaView />;
}

export default App;

install the appwrite package.

yarn add appwrite

on the root folder we need to create a new src folder inside create the folder config and the file index.js.

import {Appwrite} from 'appwrite';

const sdk = new Appwrite();
// Fill with your Appwrite API endpoint and Project ID!
sdk
.setEndpoint('http://localhost/v1')
.setProject('12332170921f');

export default sdk;

This file will be our connection with our backend service. so, once we created the file we can use the SDK on the SignUp.js, for this we need to create inside our components folder.

App

import React, {useState, useEffect} from 'react';
import SignIn from './src/components/SignIn';
import SignUp from './src/components/SignUp';
import Dashboard from './src/components/Dashboard';

import {Text, View, StyleSheet} from 'react-native';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <View style={styles.centerContainer}>
      {!isLoggedIn ? (
        <SignUp onChangeLoggedIn={() => setIsLoggedIn(!isLoggedIn)} />
      ) : (
        <Dashboard />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Sign Up

// src/components/SignUp/index.js
import React, { useState} from 'react';
import sdk from '../../config';
import {
  SafeAreaView,
  StyleSheet,
  View,
  TextInput,
  Button,
  Text,
} from 'react-native';

function App(props) {
  const [alert, setAlert] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit() {
    sdk.account
      .create(email, password, name)
      .then(result => {
        props.setIsLoggedIn();
        setAlert('User created successfully');
      })
      .catch(setAlert('Something went wrong'));
  }

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>{alert}</Text>
        <TextInput
          style={styles.input}
          placeholder="Name"
          onChangeText={nameText => setName(nameText)}
        />
        <TextInput
          style={styles.input}
          placeholder="Email"
          onChangeText={nameEmail => setEmail(nameEmail)}
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          onChangeText={namePassword => setPassword(namePassword)}
        />
        <Button title="Sign Up" onPress={() => handleSubmit()} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    margin: 10,
    width: 300,
  },
});

export default App;

With these little steps now, we can use the user sign up on appwrite.

Now, If we review our dashboard we can see now the new user created. on this panel we can manage all the users information.

Sign In

We need create our components folder in order to make a new component, components/SignIn/index.js

import React, {useState} from 'react';
import sdk from '../../config';
import {
  SafeAreaView,
  StyleSheet,
  View,
  TextInput,
  Button,
  Text,
} from 'react-native';

function App() {
  const [alert, setAlert] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  async function handleSubmit() {
    await sdk.account.createSession(email, password);
    const user = await sdk.account.getAccount();

    if (user) {
      return setAlert("User signed in successfully")
    }

    return setAlert("User account doesn't exist, please SignUp")
  }

  return (
    <SafeAreaView>
      <Text>{alert}</Text>
      <TextInput
        style={styles.input}
        placeholder="Email"
        onChangeText={nameEmail => setEmail(nameEmail)}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        onChangeText={namePassword => setPassword(namePassword)}
      />
      <Button title="Sign In" onPress={() => handleSubmit()} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    margin: 10,
    width: 300,
  },
});

export default App;

Summary

Appwrite is an awesome tool pretty similar to firebase we can use non relational databases and other tools that help us to find a better way to create our app, feel free to interact with this awesome tool. it is compatible with all the most recent technologies.

In my opinion this tool it's powerful because we can customize the domain and we are not going to use the services from google sometimes when we manage a lot of data it is expansive, so if you like explore new technologies with good features offer, I recommend you this pack of tools.

If you want to take a look in the repository, here is the link: https://github.com/fernandoamz/appwrite-react-native

Next Steps

Add React Native Navigation Package.
Improve App Styles.
Explain App Health Service.