[PART-II] GSoC 2022 | Rocket.Chat | EmbeddedChat
Tags: javascript, webdev, react, opensource
Published: 2022-07-23 09:57:00

---
series: 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](https://github.com/RocketChat/EmbeddedChat).

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)
![EmbeddedChat-anonymous-off](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sve8t7bscxufd6wu5iud.gif)
#### 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](https://github.com/MomenSherif/react-oauth) 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](https://developers.google.com/identity/sign-in/web/backend-auth). So after a while of research, I started implementing a custom hook which could handle this with the plain [gapi-script](https://github.com/partnerhero/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](https://github.com/sidmohanty11/gapi-cjs)
So, I fixed the `use of eval` warnings, jest - [test failed error](https://github.com/partnerhero/gapi-script/issues/12), `this` is set to be undefined error and published the library. I used it inside of the EmbeddedChat to create the custom hook.
```javascript
// 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](https://developer.rocket.chat/reference/api/rest-api/endpoints/other-important-endpoints/authentication-endpoints/google) 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](https://github.com/RocketChat/EmbeddedChat/wiki/Chapter:-Authentication).

#### Anonymous Mode
![Anonymous-on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onz34zu20gjv0wz8ne2j.gif)
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) 
](https://github.com/RocketChat/EmbeddedChat/pull/12)
- [RocketChat/Rocket.Chat.js.SDK - Fix: eval warnings coming from js-sha256](https://github.com/RocketChat/Rocket.Chat.js.SDK/pull/155)

### Issues raised
- [RocketChat/Rocket.Chat - User can send message to a channel without joining it](https://github.com/RocketChat/Rocket.Chat/issues/26266)
- [RocketChat/Rocket.Chat.js.SDK - BUG: RC node.js SDK deps use eval statements](https://github.com/RocketChat/Rocket.Chat.js.SDK/issues/154)

### Documentation

- [Wiki: Chapter - Authentication](https://github.com/RocketChat/EmbeddedChat/wiki/Chapter:-Authentication)
- [Wiki: Chapter - Emoji Picker](https://github.com/RocketChat/EmbeddedChat/wiki/Chapter:-Emoji-Picker)
- [Wiki: Roots of EmbeddedChat](https://github.com/RocketChat/EmbeddedChat/wiki/Roots-of-EmbeddedChat)
- [PR: Development Documentation](https://github.com/RocketChat/EmbeddedChat/pull/15)

### 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: sidmohanty11@gmail.com
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