Authentication using AuthGrid

Notice that AuthGrid is not yet ready for production environment and is still in progress!

What is AuthGrid

AuthGrid is an end-to-end open source authentication provider (both server-side and client-side) that lets you focus on your app and skip the boring and time-wasting authentication development. Forget about creating that login and register pages again and again. forget about creating a profile page, user settings, webhooks, integrations, audits, and more!

How to use AuthGrid?

First of all, AuthGrid currently supporting only express.js for the backend, React in the frontend, and mongoose as a database, but more frameworks and databases will be supported in the future!

for our example, I'll be building a dashboard application using the express.js framework for my backend, MongoDB (using mongoose) for the database, and React for the client-side.

installing AuthGrid for backend

we need to add AuthGrid middleware to our express backend, and also to install the database driver that matches our needs, in that case, we need to install the AuthGrid mongoose driver

Let's install both AuthGrid client the mongoose driver to our express backend

npm install @authgrid/client @authgrid/mongoose-driver

or using yarn

yarn add @authgrid/client @authgrid/mongoose-driver

Usage

first of all, we need of course to configure mongoose with our mongodb database connection uri, for example:

await mongoose.connect(String('mongodb://localhost:27017/my_dashboard'));

then, implementing AuthGrid is very simple, just add AuthGrid client middleware at the beginning of your express app:

import AuthGrid from '@authgrid/client';
import MongooseDriver from '@authgrid/mongoose-driver';

.....

app.use(  
  '/authgrid',  
  Authgrid({  
    driver: MongooseDriver(),  
    tokenSecret: ...,  
    refreshTokenSecret: ...,  
    mailer: ...,  
  })  
); 

notice that AuthGrid requires some options, so let's explore than now:

Driver is the way AuthGrid client communicating with our database. in our example, we are using MongoDB, so we need to import @authgrid/mongoose-driver
tokenSecret and refreshTokenSecret are very important and are using by AuthGrid to create hashed tokens for authenticating the users.
mailer is the way AuthGrid can send emails, this function will be called everytime AuthGird wants to send an email, for example, this is how im using SendGrid as my email provider:

const mailer = async ({ to, subject, html }) =>  
  sgMail.send({  
    to,  
    from: '[e-mail]',  
    subject,  
    html,  
  });

we almost done,
last thing we need to do is to protect our api using the withAutentication middleware provided by AuthGrid.
this is how we do it:

app.get('/get-user-details', withAuthentication(), (req, res) => {  
  res.json(req.user);  
});

installing AuthGrid for React.js

So now that our express.js backend is ready and protected, lets move to the client-side.
AuthGrid providing us also a very powerful client-side authentication components and state management.
let's see how we can use those pre-made components by AuthGrid.

First, we need to install the AuthGrid package for react

npm install @authgrid/react-core

or using yarn

yarn add @authgrid/react-core

usage

so now that we have the AuthGrid react-core package installed, we need to warp our whole component with the AuthGrid provider.

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter, Switch } from 'react-router-dom';  
import { AuthgridProvider, ProtectedRoute, useAuth } from '@authgrid/react-core';  

const context = {  
  baseUrl: 'http://localhost:8080',  
};  

const Home = () => {  
  const { user } = useAuth();  

  return <div>{user?.email}</div>;  
}; 

ReactDOM.render(  
  <BrowserRouter>  
    <AuthgridProvider context={context}>  
      <Switch>
        <ProtectedRoute path="/" component={Home} />  
      </Switch>
    </AuthgridProvider>
  </BrowserRouter>,  
  document.getElementById('root')  
);

as you can see, we need to provide AuthGrid the base URL for our server-side, this is very important so AuthGrid can know where to send the fetch requests.

also, for protecting routes only for authenticated users we can import the ProtectedRoute component. now, when a user wants to enter that route, he must log in before.

That's it, we are done!, now, let's check our application and see that everything is working.
when you enter your app, you should see the AuthGrid login screen (don't forget to use the ProtectedRoute component)

You can now register and login into your application!

Keep in mind that AuthGird is still at work and can be a bit buggy, and a lot of features are missing and will be added in the future with the help of the community.
so I'm not recommending using this package yet, follow the repo to be updated when AuthGrid is ready to use in production environments

AuthGrid is looking for contributors (and that also the reason I published this post :)) so contact me if you are interesting :)

https://github.com/authgrid/authgrid

A lot of features are yet to come!:

• Profile and settings page
• Audits logs
• Webhooks
• Integrations
• User management
• and much more...