[PART-II] GSoC 2022 | Rocket.Chat | EmbeddedChat

This blog is the part-ii of a series where I share my journey in the Google Summer of Code Program, with some tips, learnings, and some design decisions which we (me and my mentor) took to shape the EmbeddedChat Project.

So it's time, first evaluation is coming up (Jul 25th - Jul 29th). I am both excited and nervous at the same time. But let's talk about the usual first.

EmbeddedChat till now (Jul 23rd)

Adding Google Single sign-on Authentication in EmbeddedChat

We had chosen to go with SSO Auth as people visiting web apps are always in a hurry. They don't want to go through so many registration steps or even give their login creds. So we went with this approach, i.e, if someone visits a web app for the first time and doesn't have an account in the RocketChat instance of that company, then they can just click the "Sign in with Google" and an account will be created for them. Also, if someone already has an account in the respective RocketChat instance, then they can also login with just a click.

It seems to be simple at first, but it took a lot of research. At first I thought there must be a library that I could use, right? The closest I got was a library called -@react-oauth/google but it wasn't compatible with how RocketChat Google OAuth endpoint handled requests. It needed both acessToken and idToken but here on successful login we could get either accessToken or code object. The idToken is the JWT hashed version of code object. You can read more about it here. So after a while of research, I started implementing a custom hook which could handle this with the plain gapi-script from scratch.
But, the gapi-script introduced some errors/warnings. So, I went and fixed the code and published my own library around it.

Created a fixed version of gapi-script library called gapi-cjs

So, I fixed the use of eval warnings, jest - test failed error, this is set to be undefined error and published the library. I used it inside of the EmbeddedChat to create the custom hook.

// src/hooks/useGoogleLogin.js
import { gapi } from 'gapi-cjs';
import { useState, useEffect } from 'react';

export const useGoogleLogin = (GOOGLE_CLIENT_ID) => {
 ...
  const signIn = async () => {
    const auth = await gapi.auth2.getAuthInstance();
    await auth.signIn();
    const { access_token, id_token } = await auth.currentUser
      .get()
      .getAuthResponse();
    return { access_token, id_token };
  };
  ...
  return { user, signIn, signOut };
};

In the signin function, we return out the accessToken as well idToken which were needed to call the Google OAuth Endpoint in RocketChat.

There was another caveat we faced, that was RocketChat asks for the username when a user registers an account. So we handled that case also. You can read more about it here - Chapter: Authentication.

Anonymous Mode

So there will be a prop to the component called, anoynmousMode. If the developer or company using EmbeddedChat wants users to read messages without even logging in, then they can set anonymousMode as true and enable anonymous read in their RocketChat instance.

PRs Merged or under review

• RocketChat/EmbeddedChat - NEW: AUTH (google SSO)
• RocketChat/Rocket.Chat.js.SDK - Fix: eval warnings coming from js-sha256

Issues raised

• RocketChat/Rocket.Chat - User can send message to a channel without joining it
• RocketChat/Rocket.Chat.js.SDK - BUG: RC node.js SDK deps use eval statements

Documentation

• Wiki: Chapter - Authentication
• Wiki: Chapter - Emoji Picker
• Wiki: Roots of EmbeddedChat
• PR: Development Documentation

To end

At the end of this month, we will have a fully working product in place (to demo). Then, will move forward to add more features like pinning, starring, threads and reacting to messages.

If you want to connect:
Email: [e-mail]
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11

Do check out the project, and if you like it you can star it too :)
https://github.com/RocketChat/EmbeddedChat