Merge branch 'main' of https://github.com/authorizerdev/authorizer

fix: github endpoint to get user emails
Merge pull request #228 from Deep-Codes/main
2022-09-14 10:44:09 +05:30 · 2022-09-14 10:44:01 +05:30 · 2022-09-10 11:40:11 +05:30 · 2022-09-10 11:39:01 +05:30 · 2022-09-10 11:23:20 +05:30 · 2022-09-10 10:52:56 +05:30
53 changed files with 1510 additions and 1065 deletions
--- a/14
+++ b/14
@@ -21,13 +21,15 @@ RUN apk add build-base &&\
    make build-dashboard

 FROM alpine:latest
-WORKDIR /root/
+RUN adduser -D -h /authorizer -u 1000 -k /dev/null authorizer
+WORKDIR /authorizer
 RUN mkdir app dashboard
-COPY --from=node-builder /authorizer/app/build app/build
-COPY --from=node-builder /authorizer/app/favicon_io app/favicon_io
-COPY --from=node-builder /authorizer/dashboard/build dashboard/build
-COPY --from=node-builder /authorizer/dashboard/favicon_io dashboard/favicon_io
-COPY --from=go-builder /authorizer/build build
+COPY --from=node-builder --chown=nobody:nobody /authorizer/app/build app/build
+COPY --from=node-builder --chown=nobody:nobody /authorizer/app/favicon_io app/favicon_io
+COPY --from=node-builder --chown=nobody:nobody /authorizer/dashboard/build dashboard/build
+COPY --from=node-builder --chown=nobody:nobody /authorizer/dashboard/favicon_io dashboard/favicon_io
+COPY --from=go-builder --chown=nobody:nobody /authorizer/build build
 COPY templates templates
 EXPOSE 8080
+USER authorizer
 CMD [ "./build/server" ]
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
  Authorizer
 </h1>

-**Authorizer** is an open-source authentication and authorization solution for your applications. Bring your database and have complete control over the user information. You can self-host authorizer instances and connect to any database (Currently supports [Postgres](https://www.postgresql.org/), [MySQL](https://www.mysql.com/), [SQLite](https://www.sqlite.org/index.html), [SQLServer](https://www.microsoft.com/en-us/sql-server/), [MongoDB](https://mongodb.com/), [ArangoDB](https://www.arangodb.com/)).
+**Authorizer** is an open-source authentication and authorization solution for your applications. Bring your database and have complete control over the user information. You can self-host authorizer instances and connect to any database (Currently supports 11+ databases including [Postgres](https://www.postgresql.org/), [MySQL](https://www.mysql.com/), [SQLite](https://www.sqlite.org/index.html), [SQLServer](https://www.microsoft.com/en-us/sql-server/), [YugaByte](https://www.yugabyte.com/),  [MariaDB](https://mariadb.org/), [PlanetScale](https://planetscale.com/), [CassandraDB](https://cassandra.apache.org/_/index.html), [ScyllaDB](https://www.scylladb.com/), [MongoDB](https://mongodb.com/), [ArangoDB](https://www.arangodb.com/)).

 ## Table of contents

@@ -19,7 +19,7 @@

 # Introduction

-<img src="https://github.com/authorizerdev/authorizer/blob/main/assets/authorizer-architecture.png" style="height:20em"/>
+<img src="https://docs.authorizer.dev/images/authorizer-arch.png" style="height:20em"/>

 #### We offer the following functionality

@@ -29,13 +29,15 @@
 - ✅ OAuth2 and OpenID compatible APIs
 - ✅ APIs to update profile securely
 - ✅ Forgot password flow using email
- ✅ Social logins (Google, Github, Facebook, more coming soon)
+- ✅ Social logins (Google, Github, Facebook, LinkedIn, Apple more coming soon)
 - ✅ Role-based access management
 - ✅ Password-less login with magic link login
+- ✅ Multi factor authentication
+- ✅ Email templating
+- ✅ Webhooks

 ## Roadmap

- 2 Factor authentication
 - VueJS SDK
 - Svelte SDK
 - React Native SDK
@@ -63,11 +65,11 @@

 Deploy production ready Authorizer instance using one click deployment options available below

-| **Infra provider** |                                                                                                        **One-click link**                                                                                                        |               **Additional information**               |
-| :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------: |
-|    Railway.app     | <a href="https://railway.app/new/template?template=https://github.com/authorizerdev/authorizer-railway&amp;plugins=postgresql,redis"><img src="https://railway.app/button.svg" style="height: 44px" alt="Deploy on Railway"></a> | [docs](https://docs.authorizer.dev/deployment/railway) |
-|       Heroku       |             <a href="https://heroku.com/deploy?template=https://github.com/authorizerdev/authorizer-heroku"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" style="height: 44px;"></a>             | [docs](https://docs.authorizer.dev/deployment/heroku)  |
-|       Render       |                                 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/authorizerdev/authorizer-render)                                  | [docs](https://docs.authorizer.dev/deployment/render)  |
+| **Infra provider** |                                                                                            **One-click link**                                                                                            |               **Additional information**               |
+| :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------: |
+|    Railway.app     |                    <a href="https://railway.app/new/template/nwXp1C?referralCode=FEF4uT"><img src="https://railway.app/button.svg" style="height: 44px" alt="Deploy on Railway"></a>                     | [docs](https://docs.authorizer.dev/deployment/railway) |
+|       Heroku       | <a href="https://heroku.com/deploy?template=https://github.com/authorizerdev/authorizer-heroku"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" style="height: 44px;"></a> | [docs](https://docs.authorizer.dev/deployment/heroku)  |
+|       Render       |                     [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/authorizerdev/authorizer-render)                      | [docs](https://docs.authorizer.dev/deployment/render)  |

 ### Deploy Authorizer Using Source Code

--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "1.0.0",
 			"license": "ISC",
 			"dependencies": {
-				"@authorizerdev/authorizer-react": "^0.26.0-beta.0",
+				"@authorizerdev/authorizer-react": "^1.1.0",
 				"@types/react": "^17.0.15",
 				"@types/react-dom": "^17.0.9",
 				"esbuild": "^0.12.17",
@@ -26,22 +26,22 @@
 			}
 		},
 		"node_modules/@authorizerdev/authorizer-js": {
-			"version": "0.17.0-beta.1",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-0.17.0-beta.1.tgz",
-			"integrity": "sha512-jUlFUrs4Ys6LZ5hclPeRt84teygi+bA57d/IpV9GAqOrfifv70jkFeDln4+Bs0mZk74el23Xn+DR9380mqE4Cg==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.1.0.tgz",
+			"integrity": "sha512-MdEw1SjhIm7pXq20AscHSbnAta2PC3w7GNBY52/OzmlBXUGH3ooUQX/aszbYOse3FlhapcrGrRvg4sNM7faGAg==",
 			"dependencies": {
-				"node-fetch": "^2.6.1"
+				"cross-fetch": "^3.1.5"
 			},
 			"engines": {
 				"node": ">=10"
 			}
 		},
 		"node_modules/@authorizerdev/authorizer-react": {
-			"version": "0.26.0-beta.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-0.26.0-beta.0.tgz",
-			"integrity": "sha512-YfyiGYBmbsp3tLWIxOrOZ/hUTCmdMXVE9SLE8m1xsFsxzJJlUhepp0AMahSbH5EyLj5bchOhOw/rzgpnDZDvMw==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.1.0.tgz",
+			"integrity": "sha512-8ooyBREFI6ohHApVOPQitFr7T0w0SlpEVZruvU9oqa8OQ77UBxLQh+PCRKKPw7FeQRdCdh/VQyl17W7Xphp1NA==",
 			"dependencies": {
-				"@authorizerdev/authorizer-js": "^0.17.0-beta.1",
+				"@authorizerdev/authorizer-js": "^1.1.0",
 				"final-form": "^4.20.2",
 				"react-final-form": "^6.5.3",
 				"styled-components": "^5.3.0"
@@ -404,6 +404,14 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
 			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
 		},
+		"node_modules/cross-fetch": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+			"dependencies": {
+				"node-fetch": "2.6.7"
+			}
+		},
 		"node_modules/css-color-keywords": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@@ -852,19 +860,19 @@
 	},
 	"dependencies": {
 		"@authorizerdev/authorizer-js": {
-			"version": "0.17.0-beta.1",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-0.17.0-beta.1.tgz",
-			"integrity": "sha512-jUlFUrs4Ys6LZ5hclPeRt84teygi+bA57d/IpV9GAqOrfifv70jkFeDln4+Bs0mZk74el23Xn+DR9380mqE4Cg==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.1.0.tgz",
+			"integrity": "sha512-MdEw1SjhIm7pXq20AscHSbnAta2PC3w7GNBY52/OzmlBXUGH3ooUQX/aszbYOse3FlhapcrGrRvg4sNM7faGAg==",
 			"requires": {
-				"node-fetch": "^2.6.1"
+				"cross-fetch": "^3.1.5"
 			}
 		},
 		"@authorizerdev/authorizer-react": {
-			"version": "0.26.0-beta.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-0.26.0-beta.0.tgz",
-			"integrity": "sha512-YfyiGYBmbsp3tLWIxOrOZ/hUTCmdMXVE9SLE8m1xsFsxzJJlUhepp0AMahSbH5EyLj5bchOhOw/rzgpnDZDvMw==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.1.0.tgz",
+			"integrity": "sha512-8ooyBREFI6ohHApVOPQitFr7T0w0SlpEVZruvU9oqa8OQ77UBxLQh+PCRKKPw7FeQRdCdh/VQyl17W7Xphp1NA==",
 			"requires": {
-				"@authorizerdev/authorizer-js": "^0.17.0-beta.1",
+				"@authorizerdev/authorizer-js": "^1.1.0",
 				"final-form": "^4.20.2",
 				"react-final-form": "^6.5.3",
 				"styled-components": "^5.3.0"
@@ -1161,6 +1169,14 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
 			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
 		},
+		"cross-fetch": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+			"requires": {
+				"node-fetch": "2.6.7"
+			}
+		},
 		"css-color-keywords": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
--- a/app/package.json
+++ b/app/package.json
@@ -11,7 +11,7 @@
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
-		"@authorizerdev/authorizer-react": "^0.26.0-beta.0",
+		"@authorizerdev/authorizer-react": "^1.1.0",
 		"@types/react": "^17.0.15",
 		"@types/react-dom": "^17.0.9",
 		"esbuild": "^0.12.17",
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -4,6 +4,12 @@ import { AuthorizerProvider } from '@authorizerdev/authorizer-react';
 import Root from './Root';
 import { createRandomString } from './utils/common';

+declare global {
+  interface Window {
+    __authorizer__: any;
+  }
+}
+
 export default function App() {
 	const searchParams = new URLSearchParams(window.location.search);
 	const state = searchParams.get('state') || createRandomString();
@@ -24,7 +30,6 @@ export default function App() {
 		urlProps.redirectURL = window.location.origin + '/app';
 	}
 	const globalState: Record<string, string> = {
-		// @ts-ignore
 		...window['__authorizer__'],
 		...urlProps,
 	};
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -17,9 +17,6 @@
 				"@types/react-dom": "^17.0.11",
 				"@types/react-router-dom": "^5.3.2",
 				"dayjs": "^1.10.7",
-				"draft-js": "^0.11.7",
-				"draft-js-import-html": "^1.4.1",
-				"draftjs-to-html": "^0.9.1",
 				"esbuild": "^0.14.9",
 				"focus-visible": "^5.2.0",
 				"framer-motion": "^5.5.5",
@@ -29,14 +26,14 @@
 				"react-dom": "^17.0.2",
 				"react-draft-wysiwyg": "^1.15.0",
 				"react-dropzone": "^12.0.4",
+				"react-email-editor": "^1.6.1",
 				"react-icons": "^4.3.1",
 				"react-router-dom": "^6.2.1",
 				"typescript": "^4.5.4",
 				"urql": "^2.0.6"
 			},
 			"devDependencies": {
-				"@types/draftjs-to-html": "^0.8.1",
-				"@types/react-draft-wysiwyg": "^1.13.4"
+				"@types/react-email-editor": "^1.1.7"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -1153,25 +1150,6 @@
 				"react-dom": "^16.8.0 || 17.x"
 			}
 		},
-		"node_modules/@types/draft-js": {
-			"version": "0.11.9",
-			"resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.9.tgz",
-			"integrity": "sha512-cQJBZjjIlGaPA1tOY+wGz2KhlPtAAZOIXpUvGPxPRw5uzZ2tcj8m6Yu1QDV9YgP36+cqE3cUvgkARBzgUiuI/Q==",
-			"dev": true,
-			"dependencies": {
-				"@types/react": "*",
-				"immutable": "~3.7.4"
-			}
-		},
-		"node_modules/@types/draftjs-to-html": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/@types/draftjs-to-html/-/draftjs-to-html-0.8.1.tgz",
-			"integrity": "sha512-NBkphQs+qZ/sAz/j1pCUaxkPAOx00LTsE88aMSSfcvK+UfCpjHJDqIMCkm6wKotuJvY5w0BtdRazQ0sAaXzPdg==",
-			"dev": true,
-			"dependencies": {
-				"@types/draft-js": "*"
-			}
-		},
 		"node_modules/@types/history": {
 			"version": "4.7.9",
 			"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
@@ -1218,13 +1196,12 @@
 				"@types/react": "*"
 			}
 		},
-		"node_modules/@types/react-draft-wysiwyg": {
-			"version": "1.13.4",
-			"resolved": "https://registry.npmjs.org/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.4.tgz",
-			"integrity": "sha512-wasD1t78JDmQvdPDRPf/mf5FSHMlncunW0F6KMOKB3awzi3Wi21yHMGsRAUOkfTr3R8F+yceG8fSLz0kYWu/QA==",
+		"node_modules/@types/react-email-editor": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@types/react-email-editor/-/react-email-editor-1.1.7.tgz",
+			"integrity": "sha512-OURTAgaE9pjA6KiU97k13fPdoglI1ZyowUuZ0nu5tTSyrw5PiZoYzYEf9y25YTjmw/ohxT5yqoP0tt+AjSh1qQ==",
 			"dev": true,
 			"dependencies": {
-				"@types/draft-js": "*",
 				"@types/react": "*"
 			}
 		},
@@ -1296,11 +1273,6 @@
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
 			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
 		},
-		"node_modules/asap": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-		},
 		"node_modules/attr-accept": {
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
@@ -1387,16 +1359,6 @@
 				"toggle-selection": "^1.0.6"
 			}
 		},
-		"node_modules/core-js": {
-			"version": "3.24.1",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
-			"integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==",
-			"hasInstallScript": true,
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/core-js"
-			}
-		},
 		"node_modules/cosmiconfig": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -1412,14 +1374,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/cross-fetch": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-			"dependencies": {
-				"node-fetch": "2.6.7"
-			}
-		},
 		"node_modules/css-box-model": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
@@ -1448,59 +1402,6 @@
 			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
 		},
-		"node_modules/draft-js": {
-			"version": "0.11.7",
-			"resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
-			"integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
-			"dependencies": {
-				"fbjs": "^2.0.0",
-				"immutable": "~3.7.4",
-				"object-assign": "^4.1.1"
-			},
-			"peerDependencies": {
-				"react": ">=0.14.0",
-				"react-dom": ">=0.14.0"
-			}
-		},
-		"node_modules/draft-js-import-element": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/draft-js-import-element/-/draft-js-import-element-1.4.0.tgz",
-			"integrity": "sha512-WmYT5PrCm47lGL5FkH6sRO3TTAcn7qNHsD3igiPqLG/RXrqyKrqN4+wBgbcT2lhna/yfWTRtgzAbQsSJoS1Meg==",
-			"dependencies": {
-				"draft-js-utils": "^1.4.0",
-				"synthetic-dom": "^1.4.0"
-			},
-			"peerDependencies": {
-				"draft-js": ">=0.10.0",
-				"immutable": "3.x.x"
-			}
-		},
-		"node_modules/draft-js-import-html": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-import-html/-/draft-js-import-html-1.4.1.tgz",
-			"integrity": "sha512-KOZmtgxZriCDgg5Smr3Y09TjubvXe7rHPy/2fuLSsL+aSzwUDwH/aHDA/k47U+WfpmL4qgyg4oZhqx9TYJV0tg==",
-			"dependencies": {
-				"draft-js-import-element": "^1.4.0"
-			},
-			"peerDependencies": {
-				"draft-js": ">=0.10.0",
-				"immutable": "3.x.x"
-			}
-		},
-		"node_modules/draft-js-utils": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-utils/-/draft-js-utils-1.4.1.tgz",
-			"integrity": "sha512-xE81Y+z/muC5D5z9qWmKfxEW1XyXfsBzSbSBk2JRsoD0yzMGGHQm/0MtuqHl/EUDkaBJJLjJ2EACycoDMY/OOg==",
-			"peerDependencies": {
-				"draft-js": ">=0.10.0",
-				"immutable": "3.x.x"
-			}
-		},
-		"node_modules/draftjs-to-html": {
-			"version": "0.9.1",
-			"resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
-			"integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ=="
-		},
 		"node_modules/draftjs-utils": {
 			"version": "0.10.2",
 			"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
@@ -1774,26 +1675,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/fbjs": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
-			"integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
-			"dependencies": {
-				"core-js": "^3.6.4",
-				"cross-fetch": "^3.0.4",
-				"fbjs-css-vars": "^1.0.0",
-				"loose-envify": "^1.0.0",
-				"object-assign": "^4.1.0",
-				"promise": "^7.1.1",
-				"setimmediate": "^1.0.5",
-				"ua-parser-js": "^0.7.18"
-			}
-		},
-		"node_modules/fbjs-css-vars": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
-			"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
-		},
 		"node_modules/file-selector": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
@@ -1958,14 +1839,6 @@
 				"immutable": "3.x.x || 4.x.x"
 			}
 		},
-		"node_modules/immutable": {
-			"version": "3.7.6",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
-			"integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
-			"engines": {
-				"node": ">=0.8.0"
-			}
-		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2049,25 +1922,6 @@
 				"loose-envify": "cli.js"
 			}
 		},
-		"node_modules/node-fetch": {
-			"version": "2.6.7",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-			"dependencies": {
-				"whatwg-url": "^5.0.0"
-			},
-			"engines": {
-				"node": "4.x || >=6.0.0"
-			},
-			"peerDependencies": {
-				"encoding": "^0.1.0"
-			},
-			"peerDependenciesMeta": {
-				"encoding": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2136,14 +1990,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"node_modules/promise": {
-			"version": "7.3.1",
-			"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-			"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-			"dependencies": {
-				"asap": "~2.0.3"
-			}
-		},
 		"node_modules/prop-types": {
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -2224,6 +2070,14 @@
 				"react": ">= 16.8"
 			}
 		},
+		"node_modules/react-email-editor": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/react-email-editor/-/react-email-editor-1.6.1.tgz",
+			"integrity": "sha512-pEWpRmTY0ok03cwTGqEOoEldnzThhuRGTrcMnv8W3/jc5MTfcr9USU/IQ9HrVvFStLKoxYBIQnSKY+iCYWOtSQ==",
+			"peerDependencies": {
+				"react": "15.x || 16.x || 17.x"
+			}
+		},
 		"node_modules/react-fast-compare": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -2424,11 +2278,6 @@
 				"object-assign": "^4.1.1"
 			}
 		},
-		"node_modules/setimmediate": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-		},
 		"node_modules/source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -2462,11 +2311,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/synthetic-dom": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/synthetic-dom/-/synthetic-dom-1.4.0.tgz",
-			"integrity": "sha512-mHv51ZsmZ+ShT/4s5kg+MGUIhY7Ltq4v03xpN1c8T1Krb5pScsh/lzEjyhrVD0soVDbThbd2e+4dD9vnDG4rhg=="
-		},
 		"node_modules/tiny-invariant": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
@@ -2485,11 +2329,6 @@
 			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
 			"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
 		},
-		"node_modules/tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-		},
 		"node_modules/tslib": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
@@ -2507,24 +2346,6 @@
 				"node": ">=4.2.0"
 			}
 		},
-		"node_modules/ua-parser-js": {
-			"version": "0.7.31",
-			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-			"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/ua-parser-js"
-				},
-				{
-					"type": "paypal",
-					"url": "https://paypal.me/faisalman"
-				}
-			],
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/uc.micro": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -2588,20 +2409,6 @@
 				"loose-envify": "^1.0.0"
 			}
 		},
-		"node_modules/webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-		},
-		"node_modules/whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"dependencies": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
-			}
-		},
 		"node_modules/wonka": {
 			"version": "4.0.15",
 			"resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz",
@@ -3441,25 +3248,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"@types/draft-js": {
-			"version": "0.11.9",
-			"resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.9.tgz",
-			"integrity": "sha512-cQJBZjjIlGaPA1tOY+wGz2KhlPtAAZOIXpUvGPxPRw5uzZ2tcj8m6Yu1QDV9YgP36+cqE3cUvgkARBzgUiuI/Q==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*",
-				"immutable": "~3.7.4"
-			}
-		},
-		"@types/draftjs-to-html": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/@types/draftjs-to-html/-/draftjs-to-html-0.8.1.tgz",
-			"integrity": "sha512-NBkphQs+qZ/sAz/j1pCUaxkPAOx00LTsE88aMSSfcvK+UfCpjHJDqIMCkm6wKotuJvY5w0BtdRazQ0sAaXzPdg==",
-			"dev": true,
-			"requires": {
-				"@types/draft-js": "*"
-			}
-		},
 		"@types/history": {
 			"version": "4.7.9",
 			"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
@@ -3506,13 +3294,12 @@
 				"@types/react": "*"
 			}
 		},
-		"@types/react-draft-wysiwyg": {
-			"version": "1.13.4",
-			"resolved": "https://registry.npmjs.org/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.4.tgz",
-			"integrity": "sha512-wasD1t78JDmQvdPDRPf/mf5FSHMlncunW0F6KMOKB3awzi3Wi21yHMGsRAUOkfTr3R8F+yceG8fSLz0kYWu/QA==",
+		"@types/react-email-editor": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@types/react-email-editor/-/react-email-editor-1.1.7.tgz",
+			"integrity": "sha512-OURTAgaE9pjA6KiU97k13fPdoglI1ZyowUuZ0nu5tTSyrw5PiZoYzYEf9y25YTjmw/ohxT5yqoP0tt+AjSh1qQ==",
 			"dev": true,
 			"requires": {
-				"@types/draft-js": "*",
 				"@types/react": "*"
 			}
 		},
@@ -3577,11 +3364,6 @@
 				}
 			}
 		},
-		"asap": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-		},
 		"attr-accept": {
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
@@ -3658,11 +3440,6 @@
 				"toggle-selection": "^1.0.6"
 			}
 		},
-		"core-js": {
-			"version": "3.24.1",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
-			"integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg=="
-		},
 		"cosmiconfig": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -3675,14 +3452,6 @@
 				"yaml": "^1.7.2"
 			}
 		},
-		"cross-fetch": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-			"requires": {
-				"node-fetch": "2.6.7"
-			}
-		},
 		"css-box-model": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
@@ -3711,44 +3480,6 @@
 			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
 		},
-		"draft-js": {
-			"version": "0.11.7",
-			"resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
-			"integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
-			"requires": {
-				"fbjs": "^2.0.0",
-				"immutable": "~3.7.4",
-				"object-assign": "^4.1.1"
-			}
-		},
-		"draft-js-import-element": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/draft-js-import-element/-/draft-js-import-element-1.4.0.tgz",
-			"integrity": "sha512-WmYT5PrCm47lGL5FkH6sRO3TTAcn7qNHsD3igiPqLG/RXrqyKrqN4+wBgbcT2lhna/yfWTRtgzAbQsSJoS1Meg==",
-			"requires": {
-				"draft-js-utils": "^1.4.0",
-				"synthetic-dom": "^1.4.0"
-			}
-		},
-		"draft-js-import-html": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-import-html/-/draft-js-import-html-1.4.1.tgz",
-			"integrity": "sha512-KOZmtgxZriCDgg5Smr3Y09TjubvXe7rHPy/2fuLSsL+aSzwUDwH/aHDA/k47U+WfpmL4qgyg4oZhqx9TYJV0tg==",
-			"requires": {
-				"draft-js-import-element": "^1.4.0"
-			}
-		},
-		"draft-js-utils": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-utils/-/draft-js-utils-1.4.1.tgz",
-			"integrity": "sha512-xE81Y+z/muC5D5z9qWmKfxEW1XyXfsBzSbSBk2JRsoD0yzMGGHQm/0MtuqHl/EUDkaBJJLjJ2EACycoDMY/OOg==",
-			"requires": {}
-		},
-		"draftjs-to-html": {
-			"version": "0.9.1",
-			"resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
-			"integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ=="
-		},
 		"draftjs-utils": {
 			"version": "0.10.2",
 			"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
@@ -3901,26 +3632,6 @@
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
 			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
 		},
-		"fbjs": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
-			"integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
-			"requires": {
-				"core-js": "^3.6.4",
-				"cross-fetch": "^3.0.4",
-				"fbjs-css-vars": "^1.0.0",
-				"loose-envify": "^1.0.0",
-				"object-assign": "^4.1.0",
-				"promise": "^7.1.1",
-				"setimmediate": "^1.0.5",
-				"ua-parser-js": "^0.7.18"
-			}
-		},
-		"fbjs-css-vars": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
-			"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
-		},
 		"file-selector": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
@@ -4050,11 +3761,6 @@
 			"integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
 			"requires": {}
 		},
-		"immutable": {
-			"version": "3.7.6",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
-			"integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw=="
-		},
 		"import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4126,14 +3832,6 @@
 				"js-tokens": "^3.0.0 || ^4.0.0"
 			}
 		},
-		"node-fetch": {
-			"version": "2.6.7",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-			"requires": {
-				"whatwg-url": "^5.0.0"
-			}
-		},
 		"object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4189,14 +3887,6 @@
 				}
 			}
 		},
-		"promise": {
-			"version": "7.3.1",
-			"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-			"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-			"requires": {
-				"asap": "~2.0.3"
-			}
-		},
 		"prop-types": {
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4256,6 +3946,12 @@
 				"prop-types": "^15.8.1"
 			}
 		},
+		"react-email-editor": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/react-email-editor/-/react-email-editor-1.6.1.tgz",
+			"integrity": "sha512-pEWpRmTY0ok03cwTGqEOoEldnzThhuRGTrcMnv8W3/jc5MTfcr9USU/IQ9HrVvFStLKoxYBIQnSKY+iCYWOtSQ==",
+			"requires": {}
+		},
 		"react-fast-compare": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -4400,11 +4096,6 @@
 				"object-assign": "^4.1.1"
 			}
 		},
-		"setimmediate": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-		},
 		"source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -4432,11 +4123,6 @@
 				"has-flag": "^3.0.0"
 			}
 		},
-		"synthetic-dom": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/synthetic-dom/-/synthetic-dom-1.4.0.tgz",
-			"integrity": "sha512-mHv51ZsmZ+ShT/4s5kg+MGUIhY7Ltq4v03xpN1c8T1Krb5pScsh/lzEjyhrVD0soVDbThbd2e+4dD9vnDG4rhg=="
-		},
 		"tiny-invariant": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
@@ -4452,11 +4138,6 @@
 			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
 			"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
 		},
-		"tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-		},
 		"tslib": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
@@ -4467,11 +4148,6 @@
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
 			"integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg=="
 		},
-		"ua-parser-js": {
-			"version": "0.7.31",
-			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-			"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
-		},
 		"uc.micro": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -4516,20 +4192,6 @@
 				"loose-envify": "^1.0.0"
 			}
 		},
-		"webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-		},
-		"whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"requires": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
-			}
-		},
 		"wonka": {
 			"version": "4.0.15",
 			"resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz",
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -19,9 +19,6 @@
 		"@types/react-dom": "^17.0.11",
 		"@types/react-router-dom": "^5.3.2",
 		"dayjs": "^1.10.7",
-		"draft-js": "^0.11.7",
-		"draft-js-import-html": "^1.4.1",
-		"draftjs-to-html": "^0.9.1",
 		"esbuild": "^0.14.9",
 		"focus-visible": "^5.2.0",
 		"framer-motion": "^5.5.5",
@@ -31,13 +28,13 @@
 		"react-dom": "^17.0.2",
 		"react-draft-wysiwyg": "^1.15.0",
 		"react-dropzone": "^12.0.4",
+		"react-email-editor": "^1.6.1",
 		"react-icons": "^4.3.1",
 		"react-router-dom": "^6.2.1",
 		"typescript": "^4.5.4",
 		"urql": "^2.0.6"
 	},
 	"devDependencies": {
-		"@types/draftjs-to-html": "^0.8.1",
-		"@types/react-draft-wysiwyg": "^1.13.4"
+		"@types/react-email-editor": "^1.1.7"
 	}
 }
--- a/dashboard/src/components/EnvComponents/Features.tsx
+++ b/dashboard/src/components/EnvComponents/Features.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Stack, Text } from '@chakra-ui/react';
+import { Divider, Flex, Stack, Text } from '@chakra-ui/react';
 import InputField from '../InputField';
 import { SwitchInputType } from '../../constants';

@@ -10,7 +10,7 @@ const Features = ({ variables, setVariables }: any) => {
 			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
 				Disable Features
 			</Text>
-			<Stack spacing={6} padding="2% 0%">
+			<Stack spacing={6}>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Disable Login Page:</Text>
@@ -83,6 +83,48 @@ const Features = ({ variables, setVariables }: any) => {
 						/>
 					</Flex>
 				</Flex>
+				<Flex alignItems="center">
+					<Flex w="100%" alignItems="baseline" flexDir="column">
+						<Text fontSize="sm">
+							Disable Multi Factor Authentication (MFA):
+						</Text>
+						<Text fontSize="x-small">
+							Note: Enabling this will ignore Enforcing MFA shown below and will
+							also ignore the user MFA setting.
+						</Text>
+					</Flex>
+					<Flex justifyContent="start" mb={3}>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_MULTI_FACTOR_AUTHENTICATION}
+						/>
+					</Flex>
+				</Flex>
+			</Stack>
+			<Divider paddingY={5} />
+			<Text fontSize="md" paddingTop={5} fontWeight="bold" mb={5}>
+				Enable Features
+			</Text>
+			<Stack spacing={6}>
+				<Flex alignItems="center">
+					<Flex w="100%" alignItems="baseline" flexDir="column">
+						<Text fontSize="sm">
+							Enforce Multi Factor Authentication (MFA):
+						</Text>
+						<Text fontSize="x-small">
+							Note: If you disable enforcing after it was enabled, it will still
+							keep MFA enabled for older users.
+						</Text>
+					</Flex>
+					<Flex justifyContent="start" mb={3}>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.ENFORCE_MULTI_FACTOR_AUTHENTICATION}
+						/>
+					</Flex>
+				</Flex>
 			</Stack>
 		</div>
 	);
--- a/dashboard/src/components/EnvComponents/JWTConfiguration.tsx
+++ b/dashboard/src/components/EnvComponents/JWTConfiguration.tsx
@@ -1,154 +1,201 @@
-import React from "react";
-import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import React from 'react';
 import {
-  HiddenInputType,
-  TextInputType,
-  TextAreaInputType,
-} from "../../constants";
-import GenerateKeysModal from "../GenerateKeysModal";
-import InputField from "../InputField";
+	Flex,
+	Stack,
+	Center,
+	Text,
+	useMediaQuery,
+	Button,
+	useToast,
+} from '@chakra-ui/react';
+import {
+	HiddenInputType,
+	TextInputType,
+	TextAreaInputType,
+} from '../../constants';
+import GenerateKeysModal from '../GenerateKeysModal';
+import InputField from '../InputField';
+import { copyTextToClipboard } from '../../utils';

 const JSTConfigurations = ({
-  variables,
-  setVariables,
-  fieldVisibility,
-  setFieldVisibility,
-  SelectInputType,
-  getData,
-  HMACEncryptionType,
-  RSAEncryptionType,
-  ECDSAEncryptionType,
+	variables,
+	setVariables,
+	fieldVisibility,
+	setFieldVisibility,
+	SelectInputType,
+	getData,
+	HMACEncryptionType,
+	RSAEncryptionType,
+	ECDSAEncryptionType,
 }: any) => {
-  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+	const toast = useToast();

-  return (
-    <div>
-      {" "}
-      <Flex
-        borderRadius={5}
-        width="100%"
-        justifyContent="space-between"
-        alignItems="center"
-        paddingTop="2%"
-      >
-        <Text
-          fontSize={isNotSmallerScreen ? "md" : "sm"}
-          fontWeight="bold"
-          mb={5}
-        >
-          JWT (JSON Web Tokens) Configurations
-        </Text>
-        <Flex mb={7}>
-          <GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
-        </Flex>
-      </Flex>
-      <Stack spacing={6} padding="2% 0%">
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-          <Flex w="30%" justifyContent="start" alignItems="center">
-            <Text fontSize="sm">JWT Type:</Text>
-          </Flex>
-          <Flex
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
-          >
-            <InputField
-              borderRadius={5}
-              variables={variables}
-              setVariables={setVariables}
-              inputType={SelectInputType}
-              value={SelectInputType}
-              options={{
-                ...HMACEncryptionType,
-                ...RSAEncryptionType,
-                ...ECDSAEncryptionType,
-              }}
-            />
-          </Flex>
-        </Flex>
-        {Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
-          <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-            <Flex w="30%" justifyContent="start" alignItems="center">
-              <Text fontSize="sm">JWT Secret</Text>
-            </Flex>
-            <Center
-              w={isNotSmallerScreen ? "70%" : "100%"}
-              mt={isNotSmallerScreen ? "0" : "2"}
-            >
-              <InputField
-                borderRadius={5}
-                variables={variables}
-                setVariables={setVariables}
-                fieldVisibility={fieldVisibility}
-                setFieldVisibility={setFieldVisibility}
-                inputType={HiddenInputType.JWT_SECRET}
-              />
-            </Center>
-          </Flex>
-        ) : (
-          <>
-            <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-              <Flex w="30%" justifyContent="start" alignItems="center">
-                <Text fontSize="sm">Public Key</Text>
-              </Flex>
-              <Center
-                w={isNotSmallerScreen ? "70%" : "100%"}
-                mt={isNotSmallerScreen ? "0" : "2"}
-              >
-                <InputField
-                  borderRadius={5}
-                  variables={variables}
-                  setVariables={setVariables}
-                  inputType={TextAreaInputType.JWT_PUBLIC_KEY}
-                  placeholder="Add public key here"
-                  minH="25vh"
-                />
-              </Center>
-            </Flex>
-            <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-              <Flex w="30%" justifyContent="start" alignItems="center">
-                <Text fontSize="sm">Private Key</Text>
-              </Flex>
-              <Center
-                w={isNotSmallerScreen ? "70%" : "100%"}
-                mt={isNotSmallerScreen ? "0" : "2"}
-              >
-                <InputField
-                  borderRadius={5}
-                  variables={variables}
-                  setVariables={setVariables}
-                  inputType={TextAreaInputType.JWT_PRIVATE_KEY}
-                  placeholder="Add private key here"
-                  minH="25vh"
-                />
-              </Center>
-            </Flex>
-          </>
-        )}
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-          <Flex
-            w={isNotSmallerScreen ? "30%" : "40%"}
-            justifyContent="start"
-            alignItems="center"
-          >
-            <Text fontSize="sm" orientation="vertical">
-              JWT Role Claim:
-            </Text>
-          </Flex>
-          <Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
-          >
-            <InputField
-              borderRadius={5}
-              variables={variables}
-              setVariables={setVariables}
-              inputType={TextInputType.JWT_ROLE_CLAIM}
-            />
-          </Center>
-        </Flex>
-      </Stack>
-    </div>
-  );
+	const copyJSON = async () => {
+		try {
+			await copyTextToClipboard(
+				JSON.stringify({
+					type: variables.JWT_TYPE,
+					key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET,
+				})
+			);
+			toast({
+				title: `JWT config copied successfully`,
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		} catch (err) {
+			console.error({
+				message: `Failed to copy JWT config`,
+				error: err,
+			});
+			toast({
+				title: `Failed to copy JWT config`,
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+		}
+	};
+
+	return (
+		<div>
+			{' '}
+			<Flex
+				borderRadius={5}
+				width="100%"
+				justifyContent="space-between"
+				alignItems="center"
+				paddingTop="2%"
+			>
+				<Text
+					fontSize={isNotSmallerScreen ? 'md' : 'sm'}
+					fontWeight="bold"
+					mb={5}
+				>
+					JWT (JSON Web Tokens) Configurations
+				</Text>
+				<Flex mb={7}>
+					<Button
+						colorScheme="blue"
+						h="1.75rem"
+						size="sm"
+						variant="ghost"
+						onClick={copyJSON}
+					>
+						Copy As JSON Config
+					</Button>
+					<GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
+				</Flex>
+			</Flex>
+			<Stack spacing={6} padding="2% 0%">
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">JWT Type:</Text>
+					</Flex>
+					<Flex
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+					>
+						<InputField
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SelectInputType}
+							value={SelectInputType}
+							options={{
+								...HMACEncryptionType,
+								...RSAEncryptionType,
+								...ECDSAEncryptionType,
+							}}
+						/>
+					</Flex>
+				</Flex>
+				{Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Flex w="30%" justifyContent="start" alignItems="center">
+							<Text fontSize="sm">JWT Secret</Text>
+						</Flex>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '2'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={variables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.JWT_SECRET}
+							/>
+						</Center>
+					</Flex>
+				) : (
+					<>
+						<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+							<Flex w="30%" justifyContent="start" alignItems="center">
+								<Text fontSize="sm">Public Key</Text>
+							</Flex>
+							<Center
+								w={isNotSmallerScreen ? '70%' : '100%'}
+								mt={isNotSmallerScreen ? '0' : '2'}
+							>
+								<InputField
+									borderRadius={5}
+									variables={variables}
+									setVariables={setVariables}
+									inputType={TextAreaInputType.JWT_PUBLIC_KEY}
+									placeholder="Add public key here"
+									minH="25vh"
+								/>
+							</Center>
+						</Flex>
+						<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+							<Flex w="30%" justifyContent="start" alignItems="center">
+								<Text fontSize="sm">Private Key</Text>
+							</Flex>
+							<Center
+								w={isNotSmallerScreen ? '70%' : '100%'}
+								mt={isNotSmallerScreen ? '0' : '2'}
+							>
+								<InputField
+									borderRadius={5}
+									variables={variables}
+									setVariables={setVariables}
+									inputType={TextAreaInputType.JWT_PRIVATE_KEY}
+									placeholder="Add private key here"
+									minH="25vh"
+								/>
+							</Center>
+						</Flex>
+					</>
+				)}
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex
+						w={isNotSmallerScreen ? '30%' : '40%'}
+						justifyContent="start"
+						alignItems="center"
+					>
+						<Text fontSize="sm" orientation="vertical">
+							JWT Role Claim:
+						</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+					>
+						<InputField
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={TextInputType.JWT_ROLE_CLAIM}
+						/>
+					</Center>
+				</Flex>
+			</Stack>
+		</div>
+	);
 };

-export default JSTConfigurations;
+export default JSTConfigurations;
--- a/dashboard/src/components/EnvComponents/OAuthConfig.tsx
+++ b/dashboard/src/components/EnvComponents/OAuthConfig.tsx
@@ -15,6 +15,7 @@ import {
 	FaFacebookF,
 	FaLinkedin,
 	FaApple,
+	FaTwitter,
 } from 'react-icons/fa';
 import { TextInputType, HiddenInputType } from '../../constants';

@@ -264,6 +265,44 @@ const OAuthConfig = ({
 							/>
 						</Center>
 					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaTwitter />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.TWITTER_CLIENT_ID}
+								placeholder="Twitter Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.TWITTER_CLIENT_SECRET}
+								placeholder="Twitter Client Secret"
+							/>
+						</Center>
+					</Flex>
 				</Stack>
 			</Box>
 		</div>
--- a/dashboard/src/components/UpdateEmailTemplateModal.tsx
+++ b/dashboard/src/components/UpdateEmailTemplateModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
 	Button,
 	Center,
@@ -17,13 +17,22 @@ import {
 	Text,
 	useDisclosure,
 	useToast,
+	Alert,
+	AlertIcon,
+	Collapse,
+	Box,
+	TableContainer,
+	Table,
+	Thead,
+	Tr,
+	Th,
+	Tbody,
+	Td,
+	Code,
 } from '@chakra-ui/react';
-import { FaPlus } from 'react-icons/fa';
+import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { useClient } from 'urql';
-import { Editor } from 'react-draft-wysiwyg';
-import { EditorState, convertToRaw, Modifier } from 'draft-js';
-import draftToHtml from 'draftjs-to-html';
-import { stateFromHTML } from 'draft-js-import-html';
+import EmailEditor from 'react-email-editor';
 import {
 	UpdateModalViews,
 	EmailTemplateInputDataFields,
@@ -39,6 +48,7 @@ interface selectedEmailTemplateDataTypes {
 	[EmailTemplateInputDataFields.SUBJECT]: string;
 	[EmailTemplateInputDataFields.CREATED_AT]: number;
 	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
 }

 interface UpdateEmailTemplateInputPropTypes {
@@ -50,6 +60,7 @@ interface UpdateEmailTemplateInputPropTypes {
 interface templateVariableDataTypes {
 	text: string;
 	value: string;
+	description: string;
 }

 interface emailTemplateDataType {
@@ -77,11 +88,9 @@ const UpdateEmailTemplate = ({
 }: UpdateEmailTemplateInputPropTypes) => {
 	const client = useClient();
 	const toast = useToast();
+	const emailEditorRef = useRef(null);
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const [loading, setLoading] = useState<boolean>(false);
-	const [editorState, setEditorState] = React.useState<EditorState>(
-		EditorState.createEmpty()
-	);
 	const [templateVariables, setTemplateVariables] = useState<
 		templateVariableDataTypes[]
 	>([]);
@@ -91,9 +100,23 @@ const UpdateEmailTemplate = ({
 	const [validator, setValidator] = useState<validatorDataType>({
 		...initTemplateValidatorData,
 	});
-	const onEditorStateChange = (editorState: EditorState) => {
-		setEditorState(editorState);
+	const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
+		useState<boolean>(false);
+
+	const onReady = () => {
+		if (selectedTemplate) {
+			const { design } = selectedTemplate;
+			try {
+				const designData = JSON.parse(design);
+				// @ts-ignore
+				emailEditorRef.current.editor.loadDesign(designData);
+			} catch (error) {
+				console.error(error);
+				onClose();
+			}
+		}
 	};
+
 	const inputChangehandler = (inputType: string, value: any) => {
 		if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) {
 			setValidator({
@@ -105,14 +128,8 @@ const UpdateEmailTemplate = ({
 	};

 	const validateData = () => {
-		const rawData: string = draftToHtml(
-			convertToRaw(editorState.getCurrentContent())
-		).trim();
 		return (
 			!loading &&
-			rawData &&
-			rawData !== '<p></p>' &&
-			rawData !== '<h1></h1>' &&
 			templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
 			templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
 			validator[EmailTemplateInputDataFields.SUBJECT]
@@ -122,69 +139,72 @@ const UpdateEmailTemplate = ({
 	const saveData = async () => {
 		if (!validateData()) return;
 		setLoading(true);
-		const params = {
-			[EmailTemplateInputDataFields.EVENT_NAME]:
-				templateData[EmailTemplateInputDataFields.EVENT_NAME],
-			[EmailTemplateInputDataFields.SUBJECT]:
-				templateData[EmailTemplateInputDataFields.SUBJECT],
-			[EmailTemplateInputDataFields.TEMPLATE]: draftToHtml(
-				convertToRaw(editorState.getCurrentContent())
-			).trim(),
-		};
-		let res: any = {};
-		if (
-			view === UpdateModalViews.Edit &&
-			selectedTemplate?.[EmailTemplateInputDataFields.ID]
-		) {
-			res = await client
-				.mutation(EditEmailTemplate, {
-					params: {
-						...params,
-						id: selectedTemplate[EmailTemplateInputDataFields.ID],
-					},
-				})
-				.toPromise();
-		} else {
-			res = await client.mutation(AddEmailTemplate, { params }).toPromise();
-		}
-		setLoading(false);
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'bottom-right',
-			});
-		} else if (
-			res.data?._add_email_template ||
-			res.data?._update_email_template
-		) {
-			toast({
-				title: capitalizeFirstLetter(
-					res.data?._add_email_template?.message ||
-						res.data?._update_email_template?.message
-				),
-				isClosable: true,
-				status: 'success',
-				position: 'bottom-right',
-			});
-			setTemplateData({
-				...initTemplateData,
-			});
-			setValidator({ ...initTemplateValidatorData });
-			fetchEmailTemplatesData();
-		}
-		view === UpdateModalViews.ADD && onClose();
+		// @ts-ignore
+		return await emailEditorRef.current.editor.exportHtml(async (data) => {
+			const { design, html } = data;
+			if (!html || !design) {
+				setLoading(false);
+				return;
+			}
+			const params = {
+				[EmailTemplateInputDataFields.EVENT_NAME]:
+					templateData[EmailTemplateInputDataFields.EVENT_NAME],
+				[EmailTemplateInputDataFields.SUBJECT]:
+					templateData[EmailTemplateInputDataFields.SUBJECT],
+				[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
+				[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
+			};
+			let res: any = {};
+			if (
+				view === UpdateModalViews.Edit &&
+				selectedTemplate?.[EmailTemplateInputDataFields.ID]
+			) {
+				res = await client
+					.mutation(EditEmailTemplate, {
+						params: {
+							...params,
+							id: selectedTemplate[EmailTemplateInputDataFields.ID],
+						},
+					})
+					.toPromise();
+			} else {
+				res = await client.mutation(AddEmailTemplate, { params }).toPromise();
+			}
+			setLoading(false);
+			if (res.error) {
+				toast({
+					title: capitalizeFirstLetter(res.error.message),
+					isClosable: true,
+					status: 'error',
+					position: 'bottom-right',
+				});
+			} else if (
+				res.data?._add_email_template ||
+				res.data?._update_email_template
+			) {
+				toast({
+					title: capitalizeFirstLetter(
+						res.data?._add_email_template?.message ||
+							res.data?._update_email_template?.message
+					),
+					isClosable: true,
+					status: 'success',
+					position: 'bottom-right',
+				});
+				setTemplateData({
+					...initTemplateData,
+				});
+				setValidator({ ...initTemplateValidatorData });
+				fetchEmailTemplatesData();
+			}
+			view === UpdateModalViews.ADD && onClose();
+		});
 	};
 	const resetData = () => {
 		if (selectedTemplate) {
 			setTemplateData(selectedTemplate);
-			setEditorState(
-				EditorState.createWithContent(stateFromHTML(selectedTemplate.template))
-			);
 		} else {
 			setTemplateData({ ...initTemplateData });
-			setEditorState(EditorState.createEmpty());
 		}
 	};
 	useEffect(() => {
@@ -194,35 +214,36 @@ const UpdateEmailTemplate = ({
 			selectedTemplate &&
 			Object.keys(selectedTemplate || {}).length
 		) {
-			const { id, created_at, template, ...rest } = selectedTemplate;
+			const { id, created_at, template, design, ...rest } = selectedTemplate;
 			setTemplateData(rest);
-			setEditorState(EditorState.createWithContent(stateFromHTML(template)));
 		}
 	}, [isOpen]);
 	useEffect(() => {
 		const updatedTemplateVariables = Object.entries(
 			emailTemplateVariables
-		).reduce((acc, varData): any => {
+		).reduce((acc, [key, val]): any => {
 			if (
 				(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
 					emailTemplateEventNames['Verify Otp'] &&
-					varData[1] === emailTemplateVariables.otp) ||
+					val === emailTemplateVariables.otp) ||
 				(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
 					emailTemplateEventNames['Verify Otp'] &&
-					varData[1] === emailTemplateVariables.verification_url)
+					val === emailTemplateVariables.verification_url)
 			) {
 				return acc;
 			}
 			return [
 				...acc,
 				{
-					text: varData[0],
-					value: varData[1],
+					text: key,
+					value: val.value,
+					description: val.description,
 				},
 			];
 		}, []);
 		setTemplateVariables(updatedTemplateVariables);
 	}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
+
 	return (
 		<>
 			{view === UpdateModalViews.ADD ? (
@@ -239,7 +260,14 @@ const UpdateEmailTemplate = ({
 			) : (
 				<MenuItem onClick={onOpen}>Edit</MenuItem>
 			)}
-			<Modal isOpen={isOpen} onClose={onClose} size="3xl">
+			<Modal
+				isOpen={isOpen}
+				onClose={() => {
+					resetData();
+					onClose();
+				}}
+				size="6xl"
+			>
 				<ModalOverlay />
 				<ModalContent>
 					<ModalHeader>
@@ -256,6 +284,73 @@ const UpdateEmailTemplate = ({
 							borderColor="gray.200"
 							p="5"
 						>
+							<Alert
+								status="info"
+								onClick={() =>
+									setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen)
+								}
+								borderRadius="5"
+								marginBottom={5}
+								cursor="pointer"
+								fontSize="sm"
+							>
+								<AlertIcon />
+								<Flex
+									width="100%"
+									justifyContent="space-between"
+									alignItems="center"
+								>
+									<Box width="85%">
+										<b>Note:</b> You can add set of dynamic variables to subject
+										and email body. Click here to see the set of dynamic
+										variables.
+									</Box>
+									{isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />}
+								</Flex>
+							</Alert>
+							<Collapse
+								style={{
+									width: '100%',
+								}}
+								in={isDynamicVariableInfoOpen}
+							>
+								<TableContainer
+									background="gray.100"
+									borderRadius={5}
+									height={200}
+									width="100%"
+									overflowY="auto"
+									overflowWrap="break-word"
+								>
+									<Table variant="simple">
+										<Thead>
+											<Tr>
+												<Th>Variable</Th>
+												<Th>Description</Th>
+											</Tr>
+										</Thead>
+										<Tbody>
+											{templateVariables.map((i) => (
+												<Tr key={i.text}>
+													<Td>
+														<Code fontSize="sm">{`{{.${i.text}}}`}</Code>
+													</Td>
+													<Td>
+														<Text
+															size="sm"
+															fontSize="sm"
+															overflowWrap="break-word"
+															width="100%"
+														>
+															{i.description}
+														</Text>
+													</Td>
+												</Tr>
+											))}
+										</Tbody>
+									</Table>
+								</TableContainer>
+							</Collapse>
 							<Flex
 								width="100%"
 								justifyContent="space-between"
@@ -290,7 +385,7 @@ const UpdateEmailTemplate = ({
 								width="100%"
 								justifyContent="start"
 								alignItems="center"
-								marginBottom="5%"
+								marginBottom="2%"
 							>
 								<Flex flex="1">Subject</Flex>
 								<Flex flex="3">
@@ -315,33 +410,21 @@ const UpdateEmailTemplate = ({
 							</Flex>
 							<Flex
 								width="100%"
-								justifyContent="space-between"
+								justifyContent="flex-start"
 								alignItems="center"
 								marginBottom="2%"
 							>
-								<Flex>Template Body</Flex>
-								<Text
-									style={{
-										fontSize: 14,
-									}}
-									color="gray.400"
-								>{`To select dynamic variables open curly braces "{"`}</Text>
+								Template Body
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="flex-start"
+								alignItems="center"
+								border="1px solid"
+								borderColor="gray.200"
+							>
+								<EmailEditor ref={emailEditorRef} onReady={onReady} />
 							</Flex>
-							<Editor
-								editorState={editorState}
-								onEditorStateChange={onEditorStateChange}
-								editorStyle={{
-									border: '1px solid #d9d9d9',
-									borderRadius: '5px',
-									marginTop: '2%',
-									height: '35vh',
-								}}
-								mention={{
-									separator: ' ',
-									trigger: '{',
-									suggestions: templateVariables,
-								}}
-							/>
 						</Flex>
 					</ModalBody>
 					<ModalFooter>
--- a/dashboard/src/components/UpdateWebhookModal.tsx
+++ b/dashboard/src/components/UpdateWebhookModal.tsx
@@ -21,6 +21,9 @@ import {
 	Text,
 	useDisclosure,
 	useToast,
+	Alert,
+	AlertIcon,
+	Divider,
 } from '@chakra-ui/react';
 import {
 	FaAngleDown,
@@ -468,68 +471,12 @@ const UpdateWebhookModal = ({
 									</Text>
 								</Flex>
 							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="center"
-								alignItems="center"
-								marginBottom="5%"
-								flexDirection="column"
-							>
-								<Flex
-									width="100%"
-									justifyContent="space-between"
-									alignItems="center"
-								>
-									<Flex>
-										Payload
-										<Text color="gray.500" ml={1}>
-											(example)
-										</Text>
-									</Flex>
-									<Button
-										onClick={() => setIsShowingPayload(!isShowingPayload)}
-										variant="ghost"
-									>
-										{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
-									</Button>
-								</Flex>
-								<Collapse
-									style={{
-										marginTop: 10,
-										width: '100%',
-									}}
-									in={isShowingPayload}
-								>
-									<Code
-										width="inherit"
-										borderRadius={5}
-										padding={2}
-										position="relative"
-									>
-										<pre style={{ overflow: 'auto' }}>
-											{webhookPayloadExample}
-										</pre>
-										{isShowingPayload && (
-											<Flex
-												position="absolute"
-												top={4}
-												right={4}
-												cursor="pointer"
-												onClick={() =>
-													copyTextToClipboard(webhookPayloadExample)
-												}
-											>
-												<FaRegClone color="#bfbfbf" />
-											</Flex>
-										)}
-									</Code>
-								</Collapse>
-							</Flex>
+
 							<Flex
 								width="100%"
 								justifyContent="space-between"
 								alignItems="center"
-								marginBottom="2%"
+								marginBottom="5%"
 							>
 								<Flex>Headers</Flex>
 								<Flex>
@@ -546,7 +493,8 @@ const UpdateWebhookModal = ({
 									</Button>
 								</Flex>
 							</Flex>
-							<Flex flexDirection="column" maxH={220} overflowY="scroll">
+
+							<Flex flexDirection="column" maxH={220} overflowY="auto">
 								{webhook[WebhookInputDataFields.HEADERS]?.map(
 									(headerData, index) => (
 										<Flex
@@ -615,6 +563,54 @@ const UpdateWebhookModal = ({
 									)
 								)}
 							</Flex>
+							<Divider marginY={5} />
+
+							<Alert
+								status="info"
+								onClick={() => setIsShowingPayload(!isShowingPayload)}
+								borderRadius="5"
+								cursor="pointer"
+								fontSize="sm"
+							>
+								<AlertIcon />
+								<Flex
+									width="100%"
+									justifyContent="space-between"
+									alignItems="center"
+								>
+									Checkout the example payload
+									{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
+								</Flex>
+							</Alert>
+							<Collapse
+								style={{
+									marginTop: 10,
+									width: '100%',
+								}}
+								in={isShowingPayload}
+							>
+								<Code
+									width="inherit"
+									borderRadius={5}
+									padding={2}
+									position="relative"
+								>
+									<pre style={{ overflow: 'auto' }}>
+										{webhookPayloadExample}
+									</pre>
+									{isShowingPayload && (
+										<Flex
+											position="absolute"
+											top={4}
+											right={4}
+											cursor="pointer"
+											onClick={() => copyTextToClipboard(webhookPayloadExample)}
+										>
+											<FaRegClone color="#bfbfbf" />
+										</Flex>
+									)}
+								</Code>
+							</Collapse>
 						</Flex>
 					</ModalBody>
 					<ModalFooter>
--- a/dashboard/src/constants.ts
+++ b/dashboard/src/constants.ts
@@ -9,6 +9,7 @@ export const TextInputType = {
 	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
 	LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
 	APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
+	TWITTER_CLIENT_ID: 'TWITTER_CLIENT_ID',
 	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
 	REDIS_URL: 'REDIS_URL',
 	SMTP_HOST: 'SMTP_HOST',
@@ -35,6 +36,7 @@ export const HiddenInputType = {
 	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
 	LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
 	APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
+	TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET',
 	JWT_SECRET: 'JWT_SECRET',
 	SMTP_PASSWORD: 'SMTP_PASSWORD',
 	ADMIN_SECRET: 'ADMIN_SECRET',
@@ -68,6 +70,8 @@ export const SwitchInputType = {
 	DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
 	DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
 	DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
+	DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION',
+	ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION',
 };

 export const DateInputType = {
@@ -108,6 +112,8 @@ export interface envVarTypes {
 	LINKEDIN_CLIENT_SECRET: string;
 	APPLE_CLIENT_ID: string;
 	APPLE_CLIENT_SECRET: string;
+	TWITTER_CLIENT_ID: string;
+	TWITTER_CLIENT_SECRET: string;
 	ROLES: [string] | [];
 	DEFAULT_ROLES: [string] | [];
 	PROTECTED_ROLES: [string] | [];
@@ -138,6 +144,8 @@ export interface envVarTypes {
 	DATABASE_TYPE: string;
 	DATABASE_URL: string;
 	ACCESS_TOKEN_EXPIRY_TIME: string;
+	DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean;
+	ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean;
 }

 export const envSubViews = {
@@ -168,6 +176,7 @@ export enum EmailTemplateInputDataFields {
 	SUBJECT = 'subject',
 	CREATED_AT = 'created_at',
 	TEMPLATE = 'template',
+	DESIGN = 'design',
 }

 export enum WebhookInputHeaderFields {
@@ -207,27 +216,90 @@ export enum webhookVerifiedStatus {
 }

 export const emailTemplateVariables = {
-	'user.id': '{.user.id}}',
-	'user.email': '{.user.email}}',
-	'user.given_name': '{.user.given_name}}',
-	'user.family_name': '{.user.family_name}}',
-	'user.signup_methods': '{.user.signup_methods}}',
-	'user.email_verified': '{.user.email_verified}}',
-	'user.picture': '{.user.picture}}',
-	'user.roles': '{.user.roles}}',
-	'user.middle_name': '{.user.middle_name}}',
-	'user.nickname': '{.user.nickname}}',
-	'user.preferred_username': '{.user.preferred_username}}',
-	'user.gender': '{.user.gender}}',
-	'user.birthdate': '{.user.birthdate}}',
-	'user.phone_number': '{.user.phone_number}}',
-	'user.phone_number_verified': '{.user.phone_number_verified}}',
-	'user.created_at': '{.user.created_at}}',
-	'user.updated_at': '{.user.updated_at}}',
-	'organization.name': '{.organization.name}}',
-	'organization.logo': '{.organization.logo}}',
-	verification_url: '{.verification_url}}',
-	otp: '{.otp}}',
+	'user.id': {
+		description: `User identifier`,
+		value: '{.user.id}}',
+	},
+	'user.email': {
+		description: 'User email address',
+		value: '{.user.email}}',
+	},
+	'user.given_name': {
+		description: `User first name`,
+		value: '{.user.given_name}}',
+	},
+	'user.family_name': {
+		description: `User last name`,
+		value: '{.user.family_name}}',
+	},
+	'user.middle_name': {
+		description: `Middle name of user`,
+		value: '{.user.middle_name}}',
+	},
+	'user.nickname': {
+		description: `Nick name of user`,
+		value: '{.user.nickname}}',
+	},
+	'user.preferred_username': {
+		description: `Username, by default it is email`,
+		value: '{.user.preferred_username}}',
+	},
+	'user.signup_methods': {
+		description: `Comma separated list of methods using which user has signed up`,
+		value: '{.user.signup_methods}}',
+	},
+	'user.email_verified': {
+		description: `Whether email is verified or not`,
+		value: '{.user.email_verified}}',
+	},
+	'user.picture': {
+		description: `URL of the user profile picture`,
+		value: '{.user.picture}}',
+	},
+	'user.roles': {
+		description: `Comma separated list of roles assigned to user`,
+		value: '{.user.roles}}',
+	},
+	'user.gender': {
+		description: `Gender of user`,
+		value: '{.user.gender}}',
+	},
+	'user.birthdate': {
+		description: `BirthDate of user`,
+		value: '{.user.birthdate}}',
+	},
+	'user.phone_number': {
+		description: `Phone number of user`,
+		value: '{.user.phone_number}}',
+	},
+	'user.phone_number_verified': {
+		description: `Whether phone number is verified or not`,
+		value: '{.user.phone_number_verified}}',
+	},
+	'user.created_at': {
+		description: `User created at time`,
+		value: '{.user.created_at}}',
+	},
+	'user.updated_at': {
+		description: `Last updated time at user`,
+		value: '{.user.updated_at}}',
+	},
+	'organization.name': {
+		description: `Organization name`,
+		value: '{.organization.name}}',
+	},
+	'organization.logo': {
+		description: `Organization logo`,
+		value: '{.organization.logo}}',
+	},
+	verification_url: {
+		description: `Verification URL in case of events other than verify otp`,
+		value: '{.verification_url}}',
+	},
+	otp: {
+		description: `OTP sent during login with Multi factor authentication`,
+		value: '{.otp}}',
+	},
 };

 export const webhookPayloadExample: string = `{
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@@ -18,48 +18,52 @@ export const AdminSessionQuery = `
 export const EnvVariablesQuery = `
  query {
    _env{
-      CLIENT_ID,
-      CLIENT_SECRET,
-	    GOOGLE_CLIENT_ID,
-      GOOGLE_CLIENT_SECRET,
-      GITHUB_CLIENT_ID,
-      GITHUB_CLIENT_SECRET,
-      FACEBOOK_CLIENT_ID,
-      FACEBOOK_CLIENT_SECRET,
-      LINKEDIN_CLIENT_ID,
-      LINKEDIN_CLIENT_SECRET,
-      APPLE_CLIENT_ID,
-      APPLE_CLIENT_SECRET,
-      DEFAULT_ROLES,
-      PROTECTED_ROLES,
-      ROLES,
-      JWT_TYPE,
-      JWT_SECRET,
-      JWT_ROLE_CLAIM,
-      JWT_PRIVATE_KEY,
-      JWT_PUBLIC_KEY,
-      REDIS_URL,
-      SMTP_HOST,
-      SMTP_PORT,
-      SMTP_USERNAME,
-      SMTP_PASSWORD,
-      SENDER_EMAIL,
-      ALLOWED_ORIGINS,
-      ORGANIZATION_NAME,
-      ORGANIZATION_LOGO,
-      ADMIN_SECRET,
-      DISABLE_LOGIN_PAGE,
-      DISABLE_MAGIC_LINK_LOGIN,
-      DISABLE_EMAIL_VERIFICATION,
-      DISABLE_BASIC_AUTHENTICATION,
-      DISABLE_SIGN_UP,
-      DISABLE_STRONG_PASSWORD,
-      DISABLE_REDIS_FOR_ENV,
-      CUSTOM_ACCESS_TOKEN_SCRIPT,
-      DATABASE_NAME,
-      DATABASE_TYPE,
-      DATABASE_URL,
-      ACCESS_TOKEN_EXPIRY_TIME,
+      CLIENT_ID
+      CLIENT_SECRET
+      GOOGLE_CLIENT_ID
+      GOOGLE_CLIENT_SECRET
+      GITHUB_CLIENT_ID
+      GITHUB_CLIENT_SECRET
+      FACEBOOK_CLIENT_ID
+      FACEBOOK_CLIENT_SECRET
+      LINKEDIN_CLIENT_ID
+      LINKEDIN_CLIENT_SECRET
+      APPLE_CLIENT_ID
+      APPLE_CLIENT_SECRET
+      TWITTER_CLIENT_ID
+      TWITTER_CLIENT_SECRET
+      DEFAULT_ROLES
+      PROTECTED_ROLES
+      ROLES
+      JWT_TYPE
+      JWT_SECRET
+      JWT_ROLE_CLAIM
+      JWT_PRIVATE_KEY
+      JWT_PUBLIC_KEY
+      REDIS_URL
+      SMTP_HOST
+      SMTP_PORT
+      SMTP_USERNAME
+      SMTP_PASSWORD
+      SENDER_EMAIL
+      ALLOWED_ORIGINS
+      ORGANIZATION_NAME
+      ORGANIZATION_LOGO
+      ADMIN_SECRET
+      DISABLE_LOGIN_PAGE
+      DISABLE_MAGIC_LINK_LOGIN
+      DISABLE_EMAIL_VERIFICATION
+      DISABLE_BASIC_AUTHENTICATION
+      DISABLE_SIGN_UP
+      DISABLE_STRONG_PASSWORD
+      DISABLE_REDIS_FOR_ENV
+      CUSTOM_ACCESS_TOKEN_SCRIPT
+      DATABASE_NAME
+      DATABASE_TYPE
+      DATABASE_URL
+      ACCESS_TOKEN_EXPIRY_TIME
+      DISABLE_MULTI_FACTOR_AUTHENTICATION
+      ENFORCE_MULTI_FACTOR_AUTHENTICATION
    }
  }
 `;
@@ -132,6 +136,7 @@ export const EmailTemplatesQuery = `
        subject
        created_at
        template
+        design
      }
      pagination {
        limit
--- a/dashboard/src/pages/EmailTemplates.tsx
+++ b/dashboard/src/pages/EmailTemplates.tsx
@@ -58,6 +58,7 @@ interface EmailTemplateDataType {
 	[EmailTemplateInputDataFields.SUBJECT]: string;
 	[EmailTemplateInputDataFields.CREATED_AT]: number;
 	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
 }

 const EmailTemplates = () => {
--- a/dashboard/src/pages/Environment.tsx
+++ b/dashboard/src/pages/Environment.tsx
@@ -50,6 +50,8 @@ const Environment = () => {
 		LINKEDIN_CLIENT_SECRET: '',
 		APPLE_CLIENT_ID: '',
 		APPLE_CLIENT_SECRET: '',
+		TWITTER_CLIENT_ID: '',
+		TWITTER_CLIENT_SECRET: '',
 		ROLES: [],
 		DEFAULT_ROLES: [],
 		PROTECTED_ROLES: [],
@@ -80,6 +82,8 @@ const Environment = () => {
 		DATABASE_TYPE: '',
 		DATABASE_URL: '',
 		ACCESS_TOKEN_EXPIRY_TIME: '',
+		DISABLE_MULTI_FACTOR_AUTHENTICATION: false,
+		ENFORCE_MULTI_FACTOR_AUTHENTICATION: false,
 	});

 	const [fieldVisibility, setFieldVisibility] = React.useState<
@@ -90,6 +94,7 @@ const Environment = () => {
 		FACEBOOK_CLIENT_SECRET: false,
 		LINKEDIN_CLIENT_SECRET: false,
 		APPLE_CLIENT_SECRET: false,
+		TWITTER_CLIENT_SECRET: false,
 		JWT_SECRET: false,
 		SMTP_PASSWORD: false,
 		ADMIN_SECRET: false,
--- a/dashboard/src/pages/Users.tsx
+++ b/dashboard/src/pages/Users.tsx
@@ -29,6 +29,7 @@ import {
 	MenuItem,
 	useToast,
 	Spinner,
+	TableContainer
 } from '@chakra-ui/react';
 import {
 	FaAngleLeft,
@@ -262,9 +263,8 @@ export default function Users() {
 			.toPromise();
 		if (res.data?._update_user?.id) {
 			toast({
-				title: `Multi factor authentication ${
-					user.is_multi_factor_auth_enabled ? 'disabled' : 'enabled'
-				} for user`,
+				title: `Multi factor authentication ${user.is_multi_factor_auth_enabled ? 'disabled' : 'enabled'
+					} for user`,
 				isClosable: true,
 				status: 'success',
 				position: 'bottom-right',
@@ -293,256 +293,262 @@ export default function Users() {
 			</Flex>
 			{!loading ? (
 				userList.length > 0 ? (
-					<Table variant="simple">
-						<Thead>
-							<Tr>
-								<Th>Email</Th>
-								<Th>Created At</Th>
-								<Th>Signup Methods</Th>
-								<Th>Roles</Th>
-								<Th>Verified</Th>
-								<Th>Access</Th>
-								<Th>MFA</Th>
-								<Th>Actions</Th>
-							</Tr>
-						</Thead>
-						<Tbody>
-							{userList.map((user: userDataTypes) => {
-								const { email_verified, created_at, ...rest }: any = user;
-								return (
-									<Tr key={user.id} style={{ fontSize: 14 }}>
-										<Td maxW="300">{user.email}</Td>
-										<Td>
-											{dayjs(user.created_at * 1000).format('MMM DD, YYYY')}
-										</Td>
-										<Td>{user.signup_methods}</Td>
-										<Td>{user.roles.join(', ')}</Td>
-										<Td>
-											<Tag
-												size="sm"
-												variant="outline"
-												colorScheme={user.email_verified ? 'green' : 'yellow'}
-											>
-												{user.email_verified.toString()}
-											</Tag>
-										</Td>
-										<Td>
-											<Tag
-												size="sm"
-												variant="outline"
-												colorScheme={user.revoked_timestamp ? 'red' : 'green'}
-											>
-												{user.revoked_timestamp ? 'Revoked' : 'Enabled'}
-											</Tag>
-										</Td>
-										<Td>
-											<Tag
-												size="sm"
-												variant="outline"
-												colorScheme={
-													user.is_multi_factor_auth_enabled ? 'green' : 'red'
-												}
-											>
-												{user.is_multi_factor_auth_enabled
-													? 'Enabled'
-													: 'Disabled'}
-											</Tag>
-										</Td>
-										<Td>
-											<Menu>
-												<MenuButton as={Button} variant="unstyled" size="sm">
-													<Flex
-														justifyContent="space-between"
-														alignItems="center"
-													>
-														<Text fontSize="sm" fontWeight="light">
-															Menu
-														</Text>
-														<FaAngleDown style={{ marginLeft: 10 }} />
-													</Flex>
-												</MenuButton>
-												<MenuList>
-													{!user.email_verified && (
-														<MenuItem
-															onClick={() => userVerificationHandler(user)}
+					<TableContainer>
+						<Table variant="simple">
+							<Thead>
+								<Tr>
+									<Th>Email</Th>
+									<Th>Created At</Th>
+									<Th>Signup Methods</Th>
+									<Th>Roles</Th>
+									<Th>Verified</Th>
+									<Th>Access</Th>
+									<Th>
+										<Tooltip label="MultiFactor Authentication Enabled / Disabled">
+											MFA
+										</Tooltip>
+									</Th>
+									<Th>Actions</Th>
+								</Tr>
+							</Thead>
+							<Tbody>
+								{userList.map((user: userDataTypes) => {
+									const { email_verified, created_at, ...rest }: any = user;
+									return (
+										<Tr key={user.id} style={{ fontSize: 14 }}>
+											<Td maxW="300">{user.email}</Td>
+											<Td>
+												{dayjs(user.created_at * 1000).format('MMM DD, YYYY')}
+											</Td>
+											<Td>{user.signup_methods}</Td>
+											<Td>{user.roles.join(', ')}</Td>
+											<Td>
+												<Tag
+													size="sm"
+													variant="outline"
+													colorScheme={user.email_verified ? 'green' : 'yellow'}
+												>
+													{user.email_verified.toString()}
+												</Tag>
+											</Td>
+											<Td>
+												<Tag
+													size="sm"
+													variant="outline"
+													colorScheme={user.revoked_timestamp ? 'red' : 'green'}
+												>
+													{user.revoked_timestamp ? 'Revoked' : 'Enabled'}
+												</Tag>
+											</Td>
+											<Td>
+												<Tag
+													size="sm"
+													variant="outline"
+													colorScheme={
+														user.is_multi_factor_auth_enabled ? 'green' : 'red'
+													}
+												>
+													{user.is_multi_factor_auth_enabled
+														? 'Enabled'
+														: 'Disabled'}
+												</Tag>
+											</Td>
+											<Td>
+												<Menu>
+													<MenuButton as={Button} variant="unstyled" size="sm">
+														<Flex
+															justifyContent="space-between"
+															alignItems="center"
 														>
-															Verify User
-														</MenuItem>
-													)}
-													<EditUserModal
-														user={rest}
-														updateUserList={updateUserList}
-													/>
-													<DeleteUserModal
-														user={rest}
-														updateUserList={updateUserList}
-													/>
-													{user.revoked_timestamp ? (
-														<MenuItem
-															onClick={() =>
-																updateAccessHandler(
-																	user.id,
-																	updateAccessActions.ENABLE
-																)
-															}
-														>
-															Enable Access
-														</MenuItem>
-													) : (
-														<MenuItem
-															onClick={() =>
-																updateAccessHandler(
-																	user.id,
-																	updateAccessActions.REVOKE
-																)
-															}
-														>
-															Revoke Access
-														</MenuItem>
-													)}
-													{user.is_multi_factor_auth_enabled ? (
-														<MenuItem
-															onClick={() => multiFactorAuthUpdateHandler(user)}
-														>
-															Disable MFA
-														</MenuItem>
-													) : (
-														<MenuItem
-															onClick={() => multiFactorAuthUpdateHandler(user)}
-														>
-															Enable MFA
-														</MenuItem>
-													)}
-												</MenuList>
-											</Menu>
-										</Td>
-									</Tr>
-								);
-							})}
-						</Tbody>
-						{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
-							<TableCaption>
-								<Flex
-									justifyContent="space-between"
-									alignItems="center"
-									m="2% 0"
-								>
-									<Flex flex="1">
-										<Tooltip label="First Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
+															<Text fontSize="sm" fontWeight="light">
+																Menu
+															</Text>
+															<FaAngleDown style={{ marginLeft: 10 }} />
+														</Flex>
+													</MenuButton>
+													<MenuList>
+														{!user.email_verified && (
+															<MenuItem
+																onClick={() => userVerificationHandler(user)}
+															>
+																Verify User
+															</MenuItem>
+														)}
+														<EditUserModal
+															user={rest}
+															updateUserList={updateUserList}
+														/>
+														<DeleteUserModal
+															user={rest}
+															updateUserList={updateUserList}
+														/>
+														{user.revoked_timestamp ? (
+															<MenuItem
+																onClick={() =>
+																	updateAccessHandler(
+																		user.id,
+																		updateAccessActions.ENABLE
+																	)
+																}
+															>
+																Enable Access
+															</MenuItem>
+														) : (
+															<MenuItem
+																onClick={() =>
+																	updateAccessHandler(
+																		user.id,
+																		updateAccessActions.REVOKE
+																	)
+																}
+															>
+																Revoke Access
+															</MenuItem>
+														)}
+														{user.is_multi_factor_auth_enabled ? (
+															<MenuItem
+																onClick={() => multiFactorAuthUpdateHandler(user)}
+															>
+																Disable MultiFactor Authentication
+															</MenuItem>
+														) : (
+															<MenuItem
+																onClick={() => multiFactorAuthUpdateHandler(user)}
+															>
+																Enable MultiFactor Authentication
+															</MenuItem>
+														)}
+													</MenuList>
+												</Menu>
+											</Td>
+										</Tr>
+									);
+								})}
+							</Tbody>
+							{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
+								<TableCaption>
+									<Flex
+										justifyContent="space-between"
+										alignItems="center"
+										m="2% 0"
+									>
+										<Flex flex="1">
+											<Tooltip label="First Page">
+												<IconButton
+													aria-label="icon button"
+													onClick={() =>
+														paginationHandler({
+															page: 1,
+														})
+													}
+													isDisabled={paginationProps.page <= 1}
+													mr={4}
+													icon={<FaAngleDoubleLeft />}
+												/>
+											</Tooltip>
+											<Tooltip label="Previous Page">
+												<IconButton
+													aria-label="icon button"
+													onClick={() =>
+														paginationHandler({
+															page: paginationProps.page - 1,
+														})
+													}
+													isDisabled={paginationProps.page <= 1}
+													icon={<FaAngleLeft />}
+												/>
+											</Tooltip>
+										</Flex>
+										<Flex
+											flex="8"
+											justifyContent="space-evenly"
+											alignItems="center"
+										>
+											<Text mr={8}>
+												Page{' '}
+												<Text fontWeight="bold" as="span">
+													{paginationProps.page}
+												</Text>{' '}
+												of{' '}
+												<Text fontWeight="bold" as="span">
+													{paginationProps.maxPages}
+												</Text>
+											</Text>
+											<Flex alignItems="center">
+												<Text flexShrink="0">Go to page:</Text>{' '}
+												<NumberInput
+													ml={2}
+													mr={8}
+													w={28}
+													min={1}
+													max={paginationProps.maxPages}
+													onChange={(value) =>
+														paginationHandler({
+															page: parseInt(value),
+														})
+													}
+													value={paginationProps.page}
+												>
+													<NumberInputField />
+													<NumberInputStepper>
+														<NumberIncrementStepper />
+														<NumberDecrementStepper />
+													</NumberInputStepper>
+												</NumberInput>
+											</Flex>
+											<Select
+												w={32}
+												value={paginationProps.limit}
+												onChange={(e) =>
 													paginationHandler({
 														page: 1,
+														limit: parseInt(e.target.value),
 													})
 												}
-												isDisabled={paginationProps.page <= 1}
-												mr={4}
-												icon={<FaAngleDoubleLeft />}
-											/>
-										</Tooltip>
-										<Tooltip label="Previous Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.page - 1,
-													})
-												}
-												isDisabled={paginationProps.page <= 1}
-												icon={<FaAngleLeft />}
-											/>
-										</Tooltip>
-									</Flex>
-									<Flex
-										flex="8"
-										justifyContent="space-evenly"
-										alignItems="center"
-									>
-										<Text mr={8}>
-											Page{' '}
-											<Text fontWeight="bold" as="span">
-												{paginationProps.page}
-											</Text>{' '}
-											of{' '}
-											<Text fontWeight="bold" as="span">
-												{paginationProps.maxPages}
-											</Text>
-										</Text>
-										<Flex alignItems="center">
-											<Text flexShrink="0">Go to page:</Text>{' '}
-											<NumberInput
-												ml={2}
-												mr={8}
-												w={28}
-												min={1}
-												max={paginationProps.maxPages}
-												onChange={(value) =>
-													paginationHandler({
-														page: parseInt(value),
-													})
-												}
-												value={paginationProps.page}
 											>
-												<NumberInputField />
-												<NumberInputStepper>
-													<NumberIncrementStepper />
-													<NumberDecrementStepper />
-												</NumberInputStepper>
-											</NumberInput>
+												{getLimits(paginationProps).map((pageSize) => (
+													<option key={pageSize} value={pageSize}>
+														Show {pageSize}
+													</option>
+												))}
+											</Select>
+										</Flex>
+										<Flex flex="1">
+											<Tooltip label="Next Page">
+												<IconButton
+													aria-label="icon button"
+													onClick={() =>
+														paginationHandler({
+															page: paginationProps.page + 1,
+														})
+													}
+													isDisabled={
+														paginationProps.page >= paginationProps.maxPages
+													}
+													icon={<FaAngleRight />}
+												/>
+											</Tooltip>
+											<Tooltip label="Last Page">
+												<IconButton
+													aria-label="icon button"
+													onClick={() =>
+														paginationHandler({
+															page: paginationProps.maxPages,
+														})
+													}
+													isDisabled={
+														paginationProps.page >= paginationProps.maxPages
+													}
+													ml={4}
+													icon={<FaAngleDoubleRight />}
+												/>
+											</Tooltip>
 										</Flex>
-										<Select
-											w={32}
-											value={paginationProps.limit}
-											onChange={(e) =>
-												paginationHandler({
-													page: 1,
-													limit: parseInt(e.target.value),
-												})
-											}
-										>
-											{getLimits(paginationProps).map((pageSize) => (
-												<option key={pageSize} value={pageSize}>
-													Show {pageSize}
-												</option>
-											))}
-										</Select>
 									</Flex>
-									<Flex flex="1">
-										<Tooltip label="Next Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.page + 1,
-													})
-												}
-												isDisabled={
-													paginationProps.page >= paginationProps.maxPages
-												}
-												icon={<FaAngleRight />}
-											/>
-										</Tooltip>
-										<Tooltip label="Last Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.maxPages,
-													})
-												}
-												isDisabled={
-													paginationProps.page >= paginationProps.maxPages
-												}
-												ml={4}
-												icon={<FaAngleDoubleRight />}
-											/>
-										</Tooltip>
-									</Flex>
-								</Flex>
-							</TableCaption>
-						)}
-					</Table>
+								</TableCaption>
+							)}
+						</Table>
+					</TableContainer>
 				) : (
 					<Flex
 						flexDirection="column"
--- a/dashboard/src/utils/index.ts
+++ b/dashboard/src/utils/index.ts
@@ -29,19 +29,16 @@ const fallbackCopyTextToClipboard = (text: string) => {
 	document.body.removeChild(textArea);
 };

-export const copyTextToClipboard = (text: string) => {
+export const copyTextToClipboard = async (text: string) => {
 	if (!navigator.clipboard) {
 		fallbackCopyTextToClipboard(text);
 		return;
 	}
-	navigator.clipboard.writeText(text).then(
-		() => {
-			console.log('Async: Copying to clipboard was successful!');
-		},
-		(err) => {
-			console.error('Async: Could not copy text: ', err);
-		}
-	);
+	try {
+		navigator.clipboard.writeText(text);
+	} catch (err) {
+		throw err;
+	}
 };

 export const getObjectDiff = (obj1: any, obj2: any) => {
--- a/server/constants/auth_methods.go
+++ b/server/constants/auth_methods.go
@@ -15,4 +15,6 @@ const (
 	AuthRecipeMethodLinkedIn = "linkedin"
 	// AuthRecipeMethodApple is the apple auth method
 	AuthRecipeMethodApple = "apple"
+	// AuthRecipeMethodTwitter is the twitter auth method
+	AuthRecipeMethodTwitter = "twitter"
 )
--- a/server/constants/env.go
+++ b/server/constants/env.go
@@ -85,6 +85,10 @@ const (
 	EnvKeyAppleClientID = "APPLE_CLIENT_ID"
 	// EnvKeyAppleClientSecret key for env variable APPLE_CLIENT_SECRET
 	EnvKeyAppleClientSecret = "APPLE_CLIENT_SECRET"
+	// EnvKeyTwitterClientID key for env variable TWITTER_CLIENT_ID
+	EnvKeyTwitterClientID = "TWITTER_CLIENT_ID"
+	// EnvKeyTwitterClientSecret key for env variable TWITTER_CLIENT_SECRET
+	EnvKeyTwitterClientSecret = "TWITTER_CLIENT_SECRET"
 	// EnvKeyOrganizationName key for env variable ORGANIZATION_NAME
 	EnvKeyOrganizationName = "ORGANIZATION_NAME"
 	// EnvKeyOrganizationLogo key for env variable ORGANIZATION_LOGO
--- a/server/constants/oauth_info_urls.go
+++ b/server/constants/oauth_info_urls.go
@@ -9,9 +9,11 @@ const (
 	// Ref: https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps#3-your-github-app-accesses-the-api-with-the-users-access-token
 	GithubUserInfoURL = "https://api.github.com/user"
 	// Get github user emails when user info email is empty Ref: https://stackoverflow.com/a/35387123
-	GithubUserEmails = "https://api/github.com/user/emails"
+	GithubUserEmails = "https://api.github.com/user/emails"

 	// Ref: https://docs.microsoft.com/en-us/linkedin/shared/integrations/people/profile-api
 	LinkedInUserInfoURL = "https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName,emailAddress,profilePicture(displayImage~:playableStreams))"
 	LinkedInEmailURL    = "https://api.linkedin.com/v2/emailAddress?q=members&projection=(elements*(handle~))"
+
+	TwitterUserInfoURL = "https://api.twitter.com/2/users/me?user.fields=id,name,profile_image_url,username"
 )
--- a/server/constants/verification_types.go
+++ b/server/constants/verification_types.go
@@ -12,5 +12,5 @@ const (
 	// VerificationTypeInviteMember is the invite_member verification type
 	VerificationTypeInviteMember = "invite_member"
 	// VerificationTypeOTP is the otp verification type
-	VerificationTypeOTP = "otp"
+	VerificationTypeOTP = "verify_otp"
 )
--- a/server/db/models/email_templates.go
+++ b/server/db/models/email_templates.go
@@ -14,6 +14,7 @@ type EmailTemplate struct {
 	EventName string `gorm:"unique" json:"event_name" bson:"event_name" cql:"event_name"`
 	Subject   string `gorm:"type:text" json:"subject" bson:"subject" cql:"subject"`
 	Template  string `gorm:"type:text" json:"template" bson:"template" cql:"template"`
+	Design    string `gorm:"type:text" json:"design" bson:"design" cql:"design"`
 	CreatedAt int64  `json:"created_at" bson:"created_at" cql:"created_at"`
 	UpdatedAt int64  `json:"updated_at" bson:"updated_at" cql:"updated_at"`
 }
@@ -29,6 +30,7 @@ func (e *EmailTemplate) AsAPIEmailTemplate() *model.EmailTemplate {
 		EventName: e.EventName,
 		Subject:   e.Subject,
 		Template:  e.Template,
+		Design:    e.Design,
 		CreatedAt: refs.NewInt64Ref(e.CreatedAt),
 		UpdatedAt: refs.NewInt64Ref(e.UpdatedAt),
 	}
--- a/server/db/providers/cassandradb/email_template.go
+++ b/server/db/providers/cassandradb/email_template.go
@@ -29,7 +29,7 @@ func (p *provider) AddEmailTemplate(ctx context.Context, emailTemplate models.Em
 		return nil, fmt.Errorf("Email template with %s event_name already exists", emailTemplate.EventName)
 	}

-	insertQuery := fmt.Sprintf("INSERT INTO %s (id, event_name, subject, template,  created_at, updated_at) VALUES ('%s', '%s', '%s','%s', %d, %d)", KeySpace+"."+models.Collections.EmailTemplate, emailTemplate.ID, emailTemplate.EventName, emailTemplate.Subject, emailTemplate.Template, emailTemplate.CreatedAt, emailTemplate.UpdatedAt)
+	insertQuery := fmt.Sprintf("INSERT INTO %s (id, event_name, subject, design, template,  created_at, updated_at) VALUES ('%s', '%s', '%s','%s','%s', %d, %d)", KeySpace+"."+models.Collections.EmailTemplate, emailTemplate.ID, emailTemplate.EventName, emailTemplate.Subject, emailTemplate.Design, emailTemplate.Template, emailTemplate.CreatedAt, emailTemplate.UpdatedAt)
 	err := p.db.Query(insertQuery).Exec()
 	if err != nil {
 		return nil, err
@@ -103,14 +103,14 @@ func (p *provider) ListEmailTemplate(ctx context.Context, pagination model.Pagin
 	// there is no offset in cassandra
 	// so we fetch till limit + offset
 	// and return the results from offset to limit
-	query := fmt.Sprintf("SELECT id, event_name, subject, template, created_at, updated_at FROM %s LIMIT %d", KeySpace+"."+models.Collections.EmailTemplate, pagination.Limit+pagination.Offset)
+	query := fmt.Sprintf("SELECT id, event_name, subject, design, template, created_at, updated_at FROM %s LIMIT %d", KeySpace+"."+models.Collections.EmailTemplate, pagination.Limit+pagination.Offset)

 	scanner := p.db.Query(query).Iter().Scanner()
 	counter := int64(0)
 	for scanner.Next() {
 		if counter >= pagination.Offset {
 			var emailTemplate models.EmailTemplate
-			err := scanner.Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+			err := scanner.Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 			if err != nil {
 				return nil, err
 			}
@@ -128,8 +128,8 @@ func (p *provider) ListEmailTemplate(ctx context.Context, pagination model.Pagin
 // GetEmailTemplateByID to get EmailTemplate by id
 func (p *provider) GetEmailTemplateByID(ctx context.Context, emailTemplateID string) (*model.EmailTemplate, error) {
 	var emailTemplate models.EmailTemplate
-	query := fmt.Sprintf(`SELECT id, event_name, subject, template, created_at, updated_at FROM %s WHERE id = '%s' LIMIT 1`, KeySpace+"."+models.Collections.EmailTemplate, emailTemplateID)
-	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+	query := fmt.Sprintf(`SELECT id, event_name, subject, design, template, created_at, updated_at FROM %s WHERE id = '%s' LIMIT 1`, KeySpace+"."+models.Collections.EmailTemplate, emailTemplateID)
+	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 	if err != nil {
 		return nil, err
 	}
@@ -139,8 +139,8 @@ func (p *provider) GetEmailTemplateByID(ctx context.Context, emailTemplateID str
 // GetEmailTemplateByEventName to get EmailTemplate by event_name
 func (p *provider) GetEmailTemplateByEventName(ctx context.Context, eventName string) (*model.EmailTemplate, error) {
 	var emailTemplate models.EmailTemplate
-	query := fmt.Sprintf(`SELECT id, event_name, subject, template, created_at, updated_at FROM %s WHERE event_name = '%s' LIMIT 1 ALLOW FILTERING`, KeySpace+"."+models.Collections.EmailTemplate, eventName)
-	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+	query := fmt.Sprintf(`SELECT id, event_name, subject, design, template, created_at, updated_at FROM %s WHERE event_name = '%s' LIMIT 1 ALLOW FILTERING`, KeySpace+"."+models.Collections.EmailTemplate, eventName)
+	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 	if err != nil {
 		return nil, err
 	}
--- a/server/db/providers/cassandradb/provider.go
+++ b/server/db/providers/cassandradb/provider.go
@@ -224,10 +224,11 @@ func NewProvider() (*provider, error) {
 		return nil, err
 	}
 	// add subject on email_templates table
-	emailTemplateAlterQuery := fmt.Sprintf(`ALTER TABLE %s.%s ADD subject text;`, KeySpace, models.Collections.EmailTemplate)
+	emailTemplateAlterQuery := fmt.Sprintf(`ALTER TABLE %s.%s ADD (subject text, design text);`, KeySpace, models.Collections.EmailTemplate)
 	err = session.Query(emailTemplateAlterQuery).Exec()
 	if err != nil {
-		return nil, err
+		log.Debug("Failed to alter table as column exists: ", err)
+		// continue
 	}

 	otpCollection := fmt.Sprintf("CREATE TABLE IF NOT EXISTS %s.%s (id text, email text, otp text, expires_at bigint, updated_at bigint, created_at bigint, PRIMARY KEY (id))", KeySpace, models.Collections.OTP)
--- a/server/email/email.go
+++ b/server/email/email.go
@@ -18,7 +18,7 @@ import (

 func getDefaultTemplate(event string) *model.EmailTemplate {
 	switch event {
-	case constants.VerificationTypeBasicAuthSignup, constants.VerificationTypeMagicLinkLogin:
+	case constants.VerificationTypeBasicAuthSignup, constants.VerificationTypeMagicLinkLogin, constants.VerificationTypeUpdateEmail:
 		return &model.EmailTemplate{
 			Subject:  emailVerificationSubject,
 			Template: emailVerificationTemplate,
--- a/server/email/utils.go
+++ b/server/email/utils.go
@@ -1 +0,0 @@
-package email
--- a/server/env/env.go
+++ b/server/env/env.go
@@ -72,6 +72,8 @@ func InitAllEnv() error {
 	osLinkedInClientSecret := os.Getenv(constants.EnvKeyLinkedInClientSecret)
 	osAppleClientID := os.Getenv(constants.EnvKeyAppleClientID)
 	osAppleClientSecret := os.Getenv(constants.EnvKeyAppleClientSecret)
+	osTwitterClientID := os.Getenv(constants.EnvKeyTwitterClientID)
+	osTwitterClientSecret := os.Getenv(constants.EnvKeyTwitterClientSecret)
 	osResetPasswordURL := os.Getenv(constants.EnvKeyResetPasswordURL)
 	osOrganizationName := os.Getenv(constants.EnvKeyOrganizationName)
 	osOrganizationLogo := os.Getenv(constants.EnvKeyOrganizationLogo)
@@ -355,31 +357,45 @@ func InitAllEnv() error {
 	if val, ok := envData[constants.EnvKeyLinkedInClientID]; !ok || val == "" {
 		envData[constants.EnvKeyLinkedInClientID] = osLinkedInClientID
 	}
-	if osFacebookClientID != "" && envData[constants.EnvKeyLinkedInClientID] != osFacebookClientID {
+	if osLinkedInClientID != "" && envData[constants.EnvKeyLinkedInClientID] != osLinkedInClientID {
 		envData[constants.EnvKeyLinkedInClientID] = osLinkedInClientID
 	}

 	if val, ok := envData[constants.EnvKeyLinkedInClientSecret]; !ok || val == "" {
 		envData[constants.EnvKeyLinkedInClientSecret] = osLinkedInClientSecret
 	}
-	if osFacebookClientSecret != "" && envData[constants.EnvKeyLinkedInClientSecret] != osFacebookClientSecret {
+	if osLinkedInClientSecret != "" && envData[constants.EnvKeyLinkedInClientSecret] != osLinkedInClientSecret {
 		envData[constants.EnvKeyLinkedInClientSecret] = osLinkedInClientSecret
 	}

 	if val, ok := envData[constants.EnvKeyAppleClientID]; !ok || val == "" {
 		envData[constants.EnvKeyAppleClientID] = osAppleClientID
 	}
-	if osFacebookClientID != "" && envData[constants.EnvKeyAppleClientID] != osFacebookClientID {
+	if osAppleClientID != "" && envData[constants.EnvKeyAppleClientID] != osAppleClientID {
 		envData[constants.EnvKeyAppleClientID] = osAppleClientID
 	}

 	if val, ok := envData[constants.EnvKeyAppleClientSecret]; !ok || val == "" {
 		envData[constants.EnvKeyAppleClientSecret] = osAppleClientSecret
 	}
-	if osFacebookClientSecret != "" && envData[constants.EnvKeyAppleClientSecret] != osFacebookClientSecret {
+	if osAppleClientSecret != "" && envData[constants.EnvKeyAppleClientSecret] != osAppleClientSecret {
 		envData[constants.EnvKeyAppleClientSecret] = osAppleClientSecret
 	}

+	if val, ok := envData[constants.EnvKeyTwitterClientID]; !ok || val == "" {
+		envData[constants.EnvKeyTwitterClientID] = osTwitterClientID
+	}
+	if osTwitterClientID != "" && envData[constants.EnvKeyTwitterClientID] != osTwitterClientID {
+		envData[constants.EnvKeyTwitterClientID] = osTwitterClientID
+	}
+
+	if val, ok := envData[constants.EnvKeyTwitterClientSecret]; !ok || val == "" {
+		envData[constants.EnvKeyTwitterClientSecret] = osTwitterClientSecret
+	}
+	if osTwitterClientSecret != "" && envData[constants.EnvKeyTwitterClientSecret] != osTwitterClientSecret {
+		envData[constants.EnvKeyTwitterClientSecret] = osTwitterClientSecret
+	}
+
 	if val, ok := envData[constants.EnvKeyResetPasswordURL]; !ok || val == "" {
 		envData[constants.EnvKeyResetPasswordURL] = strings.TrimPrefix(osResetPasswordURL, "/")
 	}
--- a/server/graph/generated/generated.go
+++ b/server/graph/generated/generated.go
@@ -55,6 +55,7 @@ type ComplexityRoot struct {

 	EmailTemplate struct {
 		CreatedAt func(childComplexity int) int
+		Design    func(childComplexity int) int
 		EventName func(childComplexity int) int
 		ID        func(childComplexity int) int
 		Subject   func(childComplexity int) int
@@ -118,6 +119,8 @@ type ComplexityRoot struct {
 		SMTPPort                         func(childComplexity int) int
 		SMTPUsername                     func(childComplexity int) int
 		SenderEmail                      func(childComplexity int) int
+		TwitterClientID                  func(childComplexity int) int
+		TwitterClientSecret              func(childComplexity int) int
 	}

 	Error struct {
@@ -144,6 +147,7 @@ type ComplexityRoot struct {
 		IsMultiFactorAuthEnabled     func(childComplexity int) int
 		IsSignUpEnabled              func(childComplexity int) int
 		IsStrongPasswordEnabled      func(childComplexity int) int
+		IsTwitterLoginEnabled        func(childComplexity int) int
 		Version                      func(childComplexity int) int
 	}

@@ -406,6 +410,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in

 		return e.complexity.EmailTemplate.CreatedAt(childComplexity), true

+	case "EmailTemplate.design":
+		if e.complexity.EmailTemplate.Design == nil {
+			break
+		}
+
+		return e.complexity.EmailTemplate.Design(childComplexity), true
+
 	case "EmailTemplate.event_name":
 		if e.complexity.EmailTemplate.EventName == nil {
 			break
@@ -805,6 +816,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in

 		return e.complexity.Env.SenderEmail(childComplexity), true

+	case "Env.TWITTER_CLIENT_ID":
+		if e.complexity.Env.TwitterClientID == nil {
+			break
+		}
+
+		return e.complexity.Env.TwitterClientID(childComplexity), true
+
+	case "Env.TWITTER_CLIENT_SECRET":
+		if e.complexity.Env.TwitterClientSecret == nil {
+			break
+		}
+
+		return e.complexity.Env.TwitterClientSecret(childComplexity), true
+
 	case "Error.message":
 		if e.complexity.Error.Message == nil {
 			break
@@ -924,6 +949,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in

 		return e.complexity.Meta.IsStrongPasswordEnabled(childComplexity), true

+	case "Meta.is_twitter_login_enabled":
+		if e.complexity.Meta.IsTwitterLoginEnabled == nil {
+			break
+		}
+
+		return e.complexity.Meta.IsTwitterLoginEnabled(childComplexity), true
+
 	case "Meta.version":
 		if e.complexity.Meta.Version == nil {
 			break
@@ -1885,6 +1917,7 @@ type Meta {
 	is_github_login_enabled: Boolean!
 	is_linkedin_login_enabled: Boolean!
 	is_apple_login_enabled: Boolean!
+	is_twitter_login_enabled: Boolean!
 	is_email_verification_enabled: Boolean!
 	is_basic_authentication_enabled: Boolean!
 	is_magic_link_login_enabled: Boolean!
@@ -2006,6 +2039,8 @@ type Env {
 	LINKEDIN_CLIENT_SECRET: String
 	APPLE_CLIENT_ID: String
 	APPLE_CLIENT_SECRET: String
+	TWITTER_CLIENT_ID: String
+	TWITTER_CLIENT_SECRET: String
 	ORGANIZATION_NAME: String
 	ORGANIZATION_LOGO: String
 }
@@ -2059,6 +2094,7 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
 	subject: String!
 	created_at: Int64
 	updated_at: Int64
@@ -2109,6 +2145,8 @@ input UpdateEnvInput {
 	LINKEDIN_CLIENT_SECRET: String
 	APPLE_CLIENT_ID: String
 	APPLE_CLIENT_SECRET: String
+	TWITTER_CLIENT_ID: String
+	TWITTER_CLIENT_SECRET: String
 	ORGANIZATION_NAME: String
 	ORGANIZATION_LOGO: String
 }
@@ -2282,6 +2320,7 @@ input AddEmailTemplateRequest {
 	event_name: String!
 	subject: String!
 	template: String!
+	design: String!
 }

 input UpdateEmailTemplateRequest {
@@ -2289,6 +2328,7 @@ input UpdateEmailTemplateRequest {
 	event_name: String
 	template: String
 	subject: String
+	design: String
 }

 input DeleteEmailTemplateRequest {
@@ -3270,6 +3310,41 @@ func (ec *executionContext) _EmailTemplate_template(ctx context.Context, field g
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }

+func (ec *executionContext) _EmailTemplate_design(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplate) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:     "EmailTemplate",
+		Field:      field,
+		Args:       nil,
+		IsMethod:   false,
+		IsResolver: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Design, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _EmailTemplate_subject(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplate) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@@ -5008,6 +5083,70 @@ func (ec *executionContext) _Env_APPLE_CLIENT_SECRET(ctx context.Context, field
 	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }

+func (ec *executionContext) _Env_TWITTER_CLIENT_ID(ctx context.Context, field graphql.CollectedField, obj *model.Env) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:     "Env",
+		Field:      field,
+		Args:       nil,
+		IsMethod:   false,
+		IsResolver: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.TwitterClientID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) _Env_TWITTER_CLIENT_SECRET(ctx context.Context, field graphql.CollectedField, obj *model.Env) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:     "Env",
+		Field:      field,
+		Args:       nil,
+		IsMethod:   false,
+		IsResolver: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.TwitterClientSecret, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _Env_ORGANIZATION_NAME(ctx context.Context, field graphql.CollectedField, obj *model.Env) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@@ -5483,6 +5622,41 @@ func (ec *executionContext) _Meta_is_apple_login_enabled(ctx context.Context, fi
 	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }

+func (ec *executionContext) _Meta_is_twitter_login_enabled(ctx context.Context, field graphql.CollectedField, obj *model.Meta) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:     "Meta",
+		Field:      field,
+		Args:       nil,
+		IsMethod:   false,
+		IsResolver: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsTwitterLoginEnabled, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _Meta_is_email_verification_enabled(ctx context.Context, field graphql.CollectedField, obj *model.Meta) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@@ -10521,6 +10695,14 @@ func (ec *executionContext) unmarshalInputAddEmailTemplateRequest(ctx context.Co
 			if err != nil {
 				return it, err
 			}
+		case "design":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("design"))
+			it.Design, err = ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		}
 	}

@@ -11331,6 +11513,14 @@ func (ec *executionContext) unmarshalInputUpdateEmailTemplateRequest(ctx context
 			if err != nil {
 				return it, err
 			}
+		case "design":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("design"))
+			it.Design, err = ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		}
 	}

@@ -11658,6 +11848,22 @@ func (ec *executionContext) unmarshalInputUpdateEnvInput(ctx context.Context, ob
 			if err != nil {
 				return it, err
 			}
+		case "TWITTER_CLIENT_ID":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("TWITTER_CLIENT_ID"))
+			it.TwitterClientID, err = ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+		case "TWITTER_CLIENT_SECRET":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("TWITTER_CLIENT_SECRET"))
+			it.TwitterClientSecret, err = ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		case "ORGANIZATION_NAME":
 			var err error

@@ -12162,6 +12368,11 @@ func (ec *executionContext) _EmailTemplate(ctx context.Context, sel ast.Selectio
 			if out.Values[i] == graphql.Null {
 				invalids++
 			}
+		case "design":
+			out.Values[i] = ec._EmailTemplate_design(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
 		case "subject":
 			out.Values[i] = ec._EmailTemplate_subject(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
@@ -12354,6 +12565,10 @@ func (ec *executionContext) _Env(ctx context.Context, sel ast.SelectionSet, obj
 			out.Values[i] = ec._Env_APPLE_CLIENT_ID(ctx, field, obj)
 		case "APPLE_CLIENT_SECRET":
 			out.Values[i] = ec._Env_APPLE_CLIENT_SECRET(ctx, field, obj)
+		case "TWITTER_CLIENT_ID":
+			out.Values[i] = ec._Env_TWITTER_CLIENT_ID(ctx, field, obj)
+		case "TWITTER_CLIENT_SECRET":
+			out.Values[i] = ec._Env_TWITTER_CLIENT_SECRET(ctx, field, obj)
 		case "ORGANIZATION_NAME":
 			out.Values[i] = ec._Env_ORGANIZATION_NAME(ctx, field, obj)
 		case "ORGANIZATION_LOGO":
@@ -12475,6 +12690,11 @@ func (ec *executionContext) _Meta(ctx context.Context, sel ast.SelectionSet, obj
 			if out.Values[i] == graphql.Null {
 				invalids++
 			}
+		case "is_twitter_login_enabled":
+			out.Values[i] = ec._Meta_is_twitter_login_enabled(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
 		case "is_email_verification_enabled":
 			out.Values[i] = ec._Meta_is_email_verification_enabled(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
--- a/server/graph/model/models_gen.go
+++ b/server/graph/model/models_gen.go
@@ -6,6 +6,7 @@ type AddEmailTemplateRequest struct {
 	EventName string `json:"event_name"`
 	Subject   string `json:"subject"`
 	Template  string `json:"template"`
+	Design    string `json:"design"`
 }

 type AddWebhookRequest struct {
@@ -45,6 +46,7 @@ type EmailTemplate struct {
 	ID        string `json:"id"`
 	EventName string `json:"event_name"`
 	Template  string `json:"template"`
+	Design    string `json:"design"`
 	Subject   string `json:"subject"`
 	CreatedAt *int64 `json:"created_at"`
 	UpdatedAt *int64 `json:"updated_at"`
@@ -104,6 +106,8 @@ type Env struct {
 	LinkedinClientSecret             *string  `json:"LINKEDIN_CLIENT_SECRET"`
 	AppleClientID                    *string  `json:"APPLE_CLIENT_ID"`
 	AppleClientSecret                *string  `json:"APPLE_CLIENT_SECRET"`
+	TwitterClientID                  *string  `json:"TWITTER_CLIENT_ID"`
+	TwitterClientSecret              *string  `json:"TWITTER_CLIENT_SECRET"`
 	OrganizationName                 *string  `json:"ORGANIZATION_NAME"`
 	OrganizationLogo                 *string  `json:"ORGANIZATION_LOGO"`
 }
@@ -162,6 +166,7 @@ type Meta struct {
 	IsGithubLoginEnabled         bool   `json:"is_github_login_enabled"`
 	IsLinkedinLoginEnabled       bool   `json:"is_linkedin_login_enabled"`
 	IsAppleLoginEnabled          bool   `json:"is_apple_login_enabled"`
+	IsTwitterLoginEnabled        bool   `json:"is_twitter_login_enabled"`
 	IsEmailVerificationEnabled   bool   `json:"is_email_verification_enabled"`
 	IsBasicAuthenticationEnabled bool   `json:"is_basic_authentication_enabled"`
 	IsMagicLinkLoginEnabled      bool   `json:"is_magic_link_login_enabled"`
@@ -252,6 +257,7 @@ type UpdateEmailTemplateRequest struct {
 	EventName *string `json:"event_name"`
 	Template  *string `json:"template"`
 	Subject   *string `json:"subject"`
+	Design    *string `json:"design"`
 }

 type UpdateEnvInput struct {
@@ -294,6 +300,8 @@ type UpdateEnvInput struct {
 	LinkedinClientSecret             *string  `json:"LINKEDIN_CLIENT_SECRET"`
 	AppleClientID                    *string  `json:"APPLE_CLIENT_ID"`
 	AppleClientSecret                *string  `json:"APPLE_CLIENT_SECRET"`
+	TwitterClientID                  *string  `json:"TWITTER_CLIENT_ID"`
+	TwitterClientSecret              *string  `json:"TWITTER_CLIENT_SECRET"`
 	OrganizationName                 *string  `json:"ORGANIZATION_NAME"`
 	OrganizationLogo                 *string  `json:"ORGANIZATION_LOGO"`
 }
--- a/server/graph/schema.graphqls
+++ b/server/graph/schema.graphqls
@@ -20,6 +20,7 @@ type Meta {
 	is_github_login_enabled: Boolean!
 	is_linkedin_login_enabled: Boolean!
 	is_apple_login_enabled: Boolean!
+	is_twitter_login_enabled: Boolean!
 	is_email_verification_enabled: Boolean!
 	is_basic_authentication_enabled: Boolean!
 	is_magic_link_login_enabled: Boolean!
@@ -141,6 +142,8 @@ type Env {
 	LINKEDIN_CLIENT_SECRET: String
 	APPLE_CLIENT_ID: String
 	APPLE_CLIENT_SECRET: String
+	TWITTER_CLIENT_ID: String
+	TWITTER_CLIENT_SECRET: String
 	ORGANIZATION_NAME: String
 	ORGANIZATION_LOGO: String
 }
@@ -194,6 +197,7 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
 	subject: String!
 	created_at: Int64
 	updated_at: Int64
@@ -244,6 +248,8 @@ input UpdateEnvInput {
 	LINKEDIN_CLIENT_SECRET: String
 	APPLE_CLIENT_ID: String
 	APPLE_CLIENT_SECRET: String
+	TWITTER_CLIENT_ID: String
+	TWITTER_CLIENT_SECRET: String
 	ORGANIZATION_NAME: String
 	ORGANIZATION_LOGO: String
 }
@@ -417,6 +423,7 @@ input AddEmailTemplateRequest {
 	event_name: String!
 	subject: String!
 	template: String!
+	design: String!
 }

 input UpdateEmailTemplateRequest {
@@ -424,6 +431,7 @@ input UpdateEmailTemplateRequest {
 	event_name: String
 	template: String
 	subject: String
+	design: String
 }

 input DeleteEmailTemplateRequest {
--- a/server/handlers/authorize.go
+++ b/server/handlers/authorize.go
@@ -248,7 +248,7 @@ func AuthorizeHandler() gin.HandlerFunc {
 				return
 			}

-			memorystore.Provider.SetUserSession(user.ID, constants.TokenTypeSessionToken+"_"+newSessionTokenData.Nonce, newSessionToken)
+			memorystore.Provider.SetUserSession(sessionKey, constants.TokenTypeSessionToken+"_"+newSessionTokenData.Nonce, newSessionToken)
 			cookie.SetSession(gc, newSessionToken)
 			code := uuid.New().String()
 			memorystore.Provider.SetState(codeChallenge, code+"@"+newSessionToken)
--- a/server/handlers/oauth_callback.go
+++ b/server/handlers/oauth_callback.go
@@ -67,6 +67,8 @@ func OAuthCallbackHandler() gin.HandlerFunc {
 			user, err = processLinkedInUserInfo(code)
 		case constants.AuthRecipeMethodApple:
 			user, err = processAppleUserInfo(code)
+		case constants.AuthRecipeMethodTwitter:
+			user, err = processTwitterUserInfo(code, sessionState)
 		default:
 			log.Info("Invalid oauth provider")
 			err = fmt.Errorf(`invalid oauth provider`)
@@ -564,3 +566,70 @@ func processAppleUserInfo(code string) (models.User, error) {

 	return user, err
 }
+
+func processTwitterUserInfo(code, verifier string) (models.User, error) {
+	user := models.User{}
+	oauth2Token, err := oauth.OAuthProviders.TwitterConfig.Exchange(oauth2.NoContext, code, oauth2.SetAuthURLParam("code_verifier", verifier))
+	if err != nil {
+		log.Debug("Failed to exchange code for token: ", err)
+		return user, fmt.Errorf("invalid twitter exchange code: %s", err.Error())
+	}
+
+	client := http.Client{}
+	req, err := http.NewRequest("GET", constants.TwitterUserInfoURL, nil)
+	if err != nil {
+		log.Debug("Failed to create Twitter user info request: ", err)
+		return user, fmt.Errorf("error creating Twitter user info request: %s", err.Error())
+	}
+	req.Header = http.Header{
+		"Authorization": []string{fmt.Sprintf("Bearer %s", oauth2Token.AccessToken)},
+	}
+
+	response, err := client.Do(req)
+	if err != nil {
+		log.Debug("Failed to request Twitter user info: ", err)
+		return user, err
+	}
+
+	defer response.Body.Close()
+	body, err := ioutil.ReadAll(response.Body)
+	if err != nil {
+		log.Debug("Failed to read Twitter user info response body: ", err)
+		return user, fmt.Errorf("failed to read Twitter response body: %s", err.Error())
+	}
+
+	if response.StatusCode >= 400 {
+		log.Debug("Failed to request Twitter user info: ", string(body))
+		return user, fmt.Errorf("failed to request Twitter user info: %s", string(body))
+	}
+
+	responseRawData := make(map[string]interface{})
+	json.Unmarshal(body, &responseRawData)
+
+	userRawData := responseRawData["data"].(map[string]interface{})
+
+	// log.Info(userRawData)
+	// Twitter API does not return E-Mail adresses by default. For that case special privileges have
+	// to be granted on a per-App basis. See https://developer.twitter.com/en/docs/twitter-api/v1/accounts-and-users/manage-account-settings/api-reference/get-account-verify_credentials
+
+	// Currently Twitter API only provides the full name of a user. To fill givenName and familyName
+	// the full name will be split at the first whitespace. This approach will not be valid for all name combinations
+	nameArr := strings.SplitAfterN(userRawData["name"].(string), " ", 2)
+
+	firstName := nameArr[0]
+	lastName := ""
+	if len(nameArr) == 2 {
+		lastName = nameArr[1]
+	}
+	nickname := userRawData["username"].(string)
+	profilePicture := userRawData["profile_image_url"].(string)
+
+	user = models.User{
+		GivenName:  &firstName,
+		FamilyName: &lastName,
+		Picture:    &profilePicture,
+		Nickname:   &nickname,
+	}
+
+	return user, nil
+}
--- a/server/handlers/oauth_login.go
+++ b/server/handlers/oauth_login.go
@@ -12,6 +12,7 @@ import (
 	"github.com/authorizerdev/authorizer/server/memorystore"
 	"github.com/authorizerdev/authorizer/server/oauth"
 	"github.com/authorizerdev/authorizer/server/parsers"
+	"github.com/authorizerdev/authorizer/server/utils"
 	"github.com/authorizerdev/authorizer/server/validators"
 )

@@ -95,7 +96,7 @@ func OAuthLoginHandler() gin.HandlerFunc {

 		}

-		oauthStateString := state + "___" + redirectURI + "___" + roles + "___" + strings.Join(scope, ",")
+		oauthStateString := state + "___" + redirectURI + "___" + roles + "___" + strings.Join(scope, " ")

 		provider := c.Param("oauth_provider")
 		isProviderConfigured := true
@@ -169,6 +170,26 @@ func OAuthLoginHandler() gin.HandlerFunc {
 			oauth.OAuthProviders.LinkedInConfig.RedirectURL = hostname + "/oauth_callback/" + constants.AuthRecipeMethodLinkedIn
 			url := oauth.OAuthProviders.LinkedInConfig.AuthCodeURL(oauthStateString)
 			c.Redirect(http.StatusTemporaryRedirect, url)
+		case constants.AuthRecipeMethodTwitter:
+			if oauth.OAuthProviders.TwitterConfig == nil {
+				log.Debug("Twitter OAuth provider is not configured")
+				isProviderConfigured = false
+				break
+			}
+
+			verifier, challenge := utils.GenerateCodeChallenge()
+
+			err := memorystore.Provider.SetState(oauthStateString, verifier)
+			if err != nil {
+				log.Debug("Error setting state: ", err)
+				c.JSON(500, gin.H{
+					"error": "internal server error",
+				})
+				return
+			}
+			oauth.OAuthProviders.TwitterConfig.RedirectURL = hostname + "/oauth_callback/" + constants.AuthRecipeMethodTwitter
+			url := oauth.OAuthProviders.TwitterConfig.AuthCodeURL(oauthStateString, oauth2.SetAuthURLParam("code_challenge", challenge), oauth2.SetAuthURLParam("code_challenge_method", "S256"))
+			c.Redirect(http.StatusTemporaryRedirect, url)
 		case constants.AuthRecipeMethodApple:
 			if oauth.OAuthProviders.AppleConfig == nil {
 				log.Debug("Apple OAuth provider is not configured")
--- a/server/handlers/token.go
+++ b/server/handlers/token.go
@@ -76,7 +76,6 @@ func TokenHandler() gin.HandlerFunc {
 		sessionKey := ""

 		if isAuthorizationCodeGrant {
-
 			if codeVerifier == "" {
 				log.Debug("Code verifier is empty")
 				gc.JSON(http.StatusBadRequest, gin.H{
@@ -134,15 +133,18 @@ func TokenHandler() gin.HandlerFunc {
 				})
 				return
 			}
+
 			userID = claims.Subject
 			roles = claims.Roles
 			scope = claims.Scope
 			loginMethod = claims.LoginMethod
+
 			// rollover the session for security
 			sessionKey = userID
 			if loginMethod != "" {
 				sessionKey = loginMethod + ":" + userID
 			}
+
 			go memorystore.Provider.DeleteUserSession(sessionKey, claims.Nonce)
 		} else {
 			// validate refresh token
--- a/server/main.go
+++ b/server/main.go
@@ -109,6 +109,7 @@ func main() {
 	router := routes.InitRouter(log)
 	log.Info("Starting Authorizer: ", VERSION)
 	port, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyPort)
+	log.Info("Authorizer running at PORT: ", port)
 	if err != nil {
 		log.Info("Error while getting port from env using default port 8080: ", err)
 		port = "8080"
--- a/server/memorystore/providers/inmemory/store.go
+++ b/server/memorystore/providers/inmemory/store.go
@@ -7,7 +7,7 @@ import (
 	"github.com/authorizerdev/authorizer/server/constants"
 )

-// SetUserSession sets the user session
+// SetUserSession sets the user session for given user identifier in form recipe:user_id
 func (c *provider) SetUserSession(userId, key, token string) error {
 	c.sessionStore.Set(userId, key, token)
 	return nil
@@ -34,6 +34,7 @@ func (c *provider) DeleteAllUserSessions(userId string) error {
 		constants.AuthRecipeMethodGithub,
 		constants.AuthRecipeMethodGoogle,
 		constants.AuthRecipeMethodLinkedIn,
+		constants.AuthRecipeMethodTwitter,
 	}

 	for _, namespace := range namespaces {
--- a/server/memorystore/providers/providers.go
+++ b/server/memorystore/providers/providers.go
@@ -2,7 +2,7 @@ package providers

 // Provider defines current memory store provider
 type Provider interface {
-	// SetUserSession sets the user session
+	// SetUserSession sets the user session for given user identifier in form recipe:user_id
 	SetUserSession(userId, key, token string) error
 	// GetAllUserSessions returns all the user sessions from the session store
 	GetAllUserSessions(userId string) (map[string]string, error)
--- a/server/memorystore/providers/redis/store.go
+++ b/server/memorystore/providers/redis/store.go
@@ -14,7 +14,7 @@ var (
 	envStorePrefix = "authorizer_env"
 )

-// SetUserSession sets the user session in redis store.
+// SetUserSession sets the user session for given user identifier in form recipe:user_id
 func (c *provider) SetUserSession(userId, key, token string) error {
 	err := c.store.HSet(c.ctx, userId, key, token).Err()
 	if err != nil {
@@ -71,6 +71,7 @@ func (c *provider) DeleteAllUserSessions(userID string) error {
 		constants.AuthRecipeMethodGithub,
 		constants.AuthRecipeMethodGoogle,
 		constants.AuthRecipeMethodLinkedIn,
+		constants.AuthRecipeMethodTwitter,
 	}
 	for _, namespace := range namespaces {
 		err := c.store.Del(c.ctx, namespace+":"+userID).Err()
--- a/server/oauth/oauth.go
+++ b/server/oauth/oauth.go
@@ -20,6 +20,7 @@ type OAuthProvider struct {
 	FacebookConfig *oauth2.Config
 	LinkedInConfig *oauth2.Config
 	AppleConfig    *oauth2.Config
+	TwitterConfig  *oauth2.Config
 }

 // OIDCProviders is a struct that contains reference all the OpenID providers
@@ -133,5 +134,28 @@ func InitOAuth() error {
 		}
 	}

+	twitterClientID, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyTwitterClientID)
+	if err != nil {
+		twitterClientID = ""
+	}
+	twitterClientSecret, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyTwitterClientSecret)
+	if err != nil {
+		twitterClientSecret = ""
+	}
+	if twitterClientID != "" && twitterClientSecret != "" {
+		OAuthProviders.TwitterConfig = &oauth2.Config{
+			ClientID:     twitterClientID,
+			ClientSecret: twitterClientSecret,
+			RedirectURL:  "/oauth_callback/twitter",
+			Endpoint: oauth2.Endpoint{
+				// Endpoint is currently not yet part of oauth2-package. See https://go-review.googlesource.com/c/oauth2/+/350889 for status
+				AuthURL:   "https://twitter.com/i/oauth2/authorize",
+				TokenURL:  "https://api.twitter.com/2/oauth2/token",
+				AuthStyle: oauth2.AuthStyleInHeader,
+			},
+			Scopes: []string{"tweet.read", "users.read"},
+		}
+	}
+
 	return nil
 }
--- a/server/resolvers/add_email_template.go
+++ b/server/resolvers/add_email_template.go
@@ -40,10 +40,15 @@ func AddEmailTemplateResolver(ctx context.Context, params model.AddEmailTemplate
 		return nil, fmt.Errorf("empty template not allowed")
 	}

+	if strings.TrimSpace(params.Design) == "" {
+		return nil, fmt.Errorf("empty design not allowed")
+	}
+
 	_, err = db.Provider.AddEmailTemplate(ctx, models.EmailTemplate{
 		EventName: params.EventName,
 		Template:  params.Template,
 		Subject:   params.Subject,
+		Design:    params.Design,
 	})
 	if err != nil {
 		log.Debug("Failed to add email template: ", err)
--- a/server/resolvers/env.go
+++ b/server/resolvers/env.go
@@ -143,6 +143,13 @@ func EnvResolver(ctx context.Context) (*model.Env, error) {
 	if val, ok := store[constants.EnvKeyAppleClientSecret]; ok {
 		res.AppleClientSecret = refs.NewStringRef(val.(string))
 	}
+	if val, ok := store[constants.EnvKeyTwitterClientID]; ok {
+		res.TwitterClientID = refs.NewStringRef(val.(string))
+	}
+	if val, ok := store[constants.EnvKeyTwitterClientSecret]; ok {
+		res.TwitterClientSecret = refs.NewStringRef(val.(string))
+	}
+
 	if val, ok := store[constants.EnvKeyOrganizationName]; ok {
 		res.OrganizationName = refs.NewStringRef(val.(string))
 	}
--- a/server/resolvers/forgot_password.go
+++ b/server/resolvers/forgot_password.go
@@ -15,6 +15,7 @@ import (
 	"github.com/authorizerdev/authorizer/server/graph/model"
 	"github.com/authorizerdev/authorizer/server/memorystore"
 	"github.com/authorizerdev/authorizer/server/parsers"
+	"github.com/authorizerdev/authorizer/server/refs"
 	"github.com/authorizerdev/authorizer/server/token"
 	"github.com/authorizerdev/authorizer/server/utils"
 	"github.com/authorizerdev/authorizer/server/validators"
@@ -61,9 +62,9 @@ func ForgotPasswordResolver(ctx context.Context, params model.ForgotPasswordInpu
 		log.Debug("Failed to generate nonce: ", err)
 		return res, err
 	}
-	redirectURL := parsers.GetAppURL(gc) + "/reset-password"
-	if params.RedirectURI != nil {
-		redirectURL = *params.RedirectURI
+	redirectURL := parsers.GetAppURL(gc)
+	if strings.TrimSpace(refs.StringValue(params.RedirectURI)) != "" {
+		redirectURL = refs.StringValue(params.RedirectURI)
 	}

 	verificationToken, err := token.CreateVerificationToken(params.Email, constants.VerificationTypeForgotPassword, hostname, nonceHash, redirectURL)
--- a/server/resolvers/login.go
+++ b/server/resolvers/login.go
@@ -50,7 +50,7 @@ func LoginResolver(ctx context.Context, params model.LoginInput) (*model.AuthRes
 	user, err := db.Provider.GetUserByEmail(ctx, params.Email)
 	if err != nil {
 		log.Debug("Failed to get user by email: ", err)
-		return res, fmt.Errorf(`user with this email not found`)
+		return res, fmt.Errorf(`bad user credentials`)
 	}

 	if user.RevokedTimestamp != nil {
@@ -72,7 +72,7 @@ func LoginResolver(ctx context.Context, params model.LoginInput) (*model.AuthRes

 	if err != nil {
 		log.Debug("Failed to compare password: ", err)
-		return res, fmt.Errorf(`invalid password`)
+		return res, fmt.Errorf(`bad user credentials`)
 	}

 	defaultRolesString, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyDefaultRoles)
--- a/server/resolvers/meta.go
+++ b/server/resolvers/meta.go
@@ -77,6 +77,18 @@ func MetaResolver(ctx context.Context) (*model.Meta, error) {
 		githubClientSecret = ""
 	}

+	twitterClientID, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyTwitterClientID)
+	if err != nil {
+		log.Debug("Failed to get Twitter Client ID from environment variable", err)
+		twitterClientID = ""
+	}
+
+	twitterClientSecret, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyTwitterClientSecret)
+	if err != nil {
+		log.Debug("Failed to get Twitter Client Secret from environment variable", err)
+		twitterClientSecret = ""
+	}
+
 	isBasicAuthDisabled, err := memorystore.Provider.GetBoolStoreEnvVariable(constants.EnvKeyDisableBasicAuthentication)
 	if err != nil {
 		log.Debug("Failed to get Disable Basic Authentication from environment variable", err)
@@ -121,6 +133,7 @@ func MetaResolver(ctx context.Context) (*model.Meta, error) {
 		IsFacebookLoginEnabled:       facebookClientID != "" && facebookClientSecret != "",
 		IsLinkedinLoginEnabled:       linkedClientID != "" && linkedInClientSecret != "",
 		IsAppleLoginEnabled:          appleClientID != "" && appleClientSecret != "",
+		IsTwitterLoginEnabled:        twitterClientID != "" && twitterClientSecret != "",
 		IsBasicAuthenticationEnabled: !isBasicAuthDisabled,
 		IsEmailVerificationEnabled:   !isEmailVerificationDisabled,
 		IsMagicLinkLoginEnabled:      !isMagicLinkLoginDisabled,
--- a/server/resolvers/update_email_template.go
+++ b/server/resolvers/update_email_template.go
@@ -65,6 +65,14 @@ func UpdateEmailTemplateResolver(ctx context.Context, params model.UpdateEmailTe
 		emailTemplateDetails.Template = refs.StringValue(params.Template)
 	}

+	if params.Design != nil && emailTemplateDetails.Design != refs.StringValue(params.Design) {
+		if strings.TrimSpace(refs.StringValue(params.Design)) == "" {
+			log.Debug("empty design not allowed")
+			return nil, fmt.Errorf("empty design not allowed")
+		}
+		emailTemplateDetails.Design = refs.StringValue(params.Design)
+	}
+
 	_, err = db.Provider.UpdateEmailTemplate(ctx, emailTemplateDetails)
 	if err != nil {
 		return nil, err
--- a/server/resolvers/update_env.go
+++ b/server/resolvers/update_env.go
@@ -31,6 +31,7 @@ func clearSessionIfRequired(currentData, updatedData map[string]interface{}) {
 	isCurrentGoogleLoginEnabled := currentData[constants.EnvKeyGoogleClientID] != nil && currentData[constants.EnvKeyGoogleClientSecret] != nil && currentData[constants.EnvKeyGoogleClientID].(string) != "" && currentData[constants.EnvKeyGoogleClientSecret].(string) != ""
 	isCurrentGithubLoginEnabled := currentData[constants.EnvKeyGithubClientID] != nil && currentData[constants.EnvKeyGithubClientSecret] != nil && currentData[constants.EnvKeyGithubClientID].(string) != "" && currentData[constants.EnvKeyGithubClientSecret].(string) != ""
 	isCurrentLinkedInLoginEnabled := currentData[constants.EnvKeyLinkedInClientID] != nil && currentData[constants.EnvKeyLinkedInClientSecret] != nil && currentData[constants.EnvKeyLinkedInClientID].(string) != "" && currentData[constants.EnvKeyLinkedInClientSecret].(string) != ""
+	isCurrentTwitterLoginEnabled := currentData[constants.EnvKeyTwitterClientID] != nil && currentData[constants.EnvKeyTwitterClientSecret] != nil && currentData[constants.EnvKeyTwitterClientID].(string) != "" && currentData[constants.EnvKeyTwitterClientSecret].(string) != ""

 	isUpdatedBasicAuthEnabled := !updatedData[constants.EnvKeyDisableBasicAuthentication].(bool)
 	isUpdatedMagicLinkLoginEnabled := !updatedData[constants.EnvKeyDisableMagicLinkLogin].(bool)
@@ -39,6 +40,7 @@ func clearSessionIfRequired(currentData, updatedData map[string]interface{}) {
 	isUpdatedGoogleLoginEnabled := updatedData[constants.EnvKeyGoogleClientID] != nil && updatedData[constants.EnvKeyGoogleClientSecret] != nil && updatedData[constants.EnvKeyGoogleClientID].(string) != "" && updatedData[constants.EnvKeyGoogleClientSecret].(string) != ""
 	isUpdatedGithubLoginEnabled := updatedData[constants.EnvKeyGithubClientID] != nil && updatedData[constants.EnvKeyGithubClientSecret] != nil && updatedData[constants.EnvKeyGithubClientID].(string) != "" && updatedData[constants.EnvKeyGithubClientSecret].(string) != ""
 	isUpdatedLinkedInLoginEnabled := updatedData[constants.EnvKeyLinkedInClientID] != nil && updatedData[constants.EnvKeyLinkedInClientSecret] != nil && updatedData[constants.EnvKeyLinkedInClientID].(string) != "" && updatedData[constants.EnvKeyLinkedInClientSecret].(string) != ""
+	isUpdatedTwitterLoginEnabled := updatedData[constants.EnvKeyTwitterClientID] != nil && updatedData[constants.EnvKeyTwitterClientSecret] != nil && updatedData[constants.EnvKeyTwitterClientID].(string) != "" && updatedData[constants.EnvKeyTwitterClientSecret].(string) != ""

 	if isCurrentBasicAuthEnabled && !isUpdatedBasicAuthEnabled {
 		memorystore.Provider.DeleteSessionForNamespace(constants.AuthRecipeMethodBasicAuth)
@@ -67,6 +69,10 @@ func clearSessionIfRequired(currentData, updatedData map[string]interface{}) {
 	if isCurrentLinkedInLoginEnabled && !isUpdatedLinkedInLoginEnabled {
 		memorystore.Provider.DeleteSessionForNamespace(constants.AuthRecipeMethodLinkedIn)
 	}
+
+	if isCurrentTwitterLoginEnabled && !isUpdatedTwitterLoginEnabled {
+		memorystore.Provider.DeleteSessionForNamespace(constants.AuthRecipeMethodTwitter)
+	}
 }

 // UpdateEnvResolver is a resolver for update config mutation
--- a/server/resolvers/update_profile.go
+++ b/server/resolvers/update_profile.go
@@ -245,7 +245,7 @@ func UpdateProfileResolver(ctx context.Context, params model.UpdateProfileInput)
 			}

 			// exec it as go routine so that we can reduce the api latency
-			go email.SendEmail([]string{user.Email}, constants.VerificationTypeBasicAuthSignup, map[string]interface{}{
+			go email.SendEmail([]string{user.Email}, verificationType, map[string]interface{}{
 				"user":             user.ToMap(),
 				"organization":     utils.GetOrganization(),
 				"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
--- a/server/test/add_email_template_test.go
+++ b/server/test/add_email_template_test.go
@@ -31,7 +31,7 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 			assert.Nil(t, emailTemplate)
 		})

-		t.Run("should not add email template for empty template", func(t *testing.T) {
+		t.Run("should not add email template for empty subject", func(t *testing.T) {
 			emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
 				EventName: s.TestInfo.TestEmailTemplateEventTypes[0],
 				Template:  " test ",
@@ -50,12 +50,25 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 			assert.Error(t, err)
 			assert.Nil(t, emailTemplate)
 		})
+
+		t.Run("should not add email template with empty design", func(t *testing.T) {
+			emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
+				EventName: s.TestInfo.TestEmailTemplateEventTypes[0],
+				Template:  "test",
+				Subject:   "test",
+				Design:    "   ",
+			})
+			assert.Error(t, err)
+			assert.Nil(t, emailTemplate)
+		})
+
 		for _, eventType := range s.TestInfo.TestEmailTemplateEventTypes {
 			t.Run("should add email template for "+eventType, func(t *testing.T) {
 				emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
 					EventName: eventType,
 					Template:  "Test email",
 					Subject:   "Test email",
+					Design:    "Test design",
 				})
 				assert.NoError(t, err)
 				assert.NotNil(t, emailTemplate)
@@ -65,6 +78,7 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 				assert.NoError(t, err)
 				assert.Equal(t, et.EventName, eventType)
 				assert.Equal(t, "Test email", et.Subject)
+				assert.Equal(t, "Test design", et.Design)
 			})
 		}
 	})
--- a/server/test/update_email_template_test.go
+++ b/server/test/update_email_template_test.go
@@ -32,6 +32,7 @@ func updateEmailTemplateTest(t *testing.T, s TestSetup) {
 			ID:       emailTemplate.ID,
 			Template: refs.NewStringRef("Updated test template"),
 			Subject:  refs.NewStringRef("Updated subject"),
+			Design:   refs.NewStringRef("Updated design"),
 		})

 		assert.NoError(t, err)
@@ -44,5 +45,6 @@ func updateEmailTemplateTest(t *testing.T, s TestSetup) {
 		assert.Equal(t, emailTemplate.ID, updatedEmailTemplate.ID)
 		assert.Equal(t, updatedEmailTemplate.Template, "Updated test template")
 		assert.Equal(t, updatedEmailTemplate.Subject, "Updated subject")
+		assert.Equal(t, updatedEmailTemplate.Design, "Updated design")
 	})
 }
--- a/server/token/auth_token.go
+++ b/server/token/auth_token.go
@@ -298,7 +298,6 @@ func ValidateBrowserSession(gc *gin.Context, encryptedSession string) (*SessionD
 	if res.LoginMethod != "" {
 		sessionStoreKey = res.LoginMethod + ":" + res.Subject
 	}
-
 	token, err := memorystore.Provider.GetUserSession(sessionStoreKey, constants.TokenTypeSessionToken+"_"+res.Nonce)
 	if token == "" || err != nil {
 		log.Debug("invalid browser session:", err)
--- a/server/utils/pkce.go
+++ b/server/utils/pkce.go
@@ -0,0 +1,32 @@
+package utils
+
+import (
+	"crypto/sha256"
+	b64 "encoding/base64"
+	"math/rand"
+	"strings"
+	"time"
+)
+
+const (
+	length = 32
+)
+
+// GenerateCodeChallenge creates PKCE-Code-Challenge
+// and returns the verifier and challenge
+func GenerateCodeChallenge() (string, string) {
+	// Generate Verifier
+	randGenerator := rand.New(rand.NewSource(time.Now().UnixNano()))
+	randomBytes := make([]byte, length)
+	for i := 0; i < length; i++ {
+		randomBytes[i] = byte(randGenerator.Intn(255))
+	}
+	verifier := strings.Trim(b64.URLEncoding.EncodeToString(randomBytes), "=")
+
+	// Generate Challenge
+	rawChallenge := sha256.New()
+	rawChallenge.Write([]byte(verifier))
+	challenge := strings.Trim(b64.URLEncoding.EncodeToString(rawChallenge.Sum(nil)), "=")
+
+	return verifier, challenge
+}
--- a/server/validators/url.go
+++ b/server/validators/url.go
@@ -30,8 +30,8 @@ func IsValidOrigin(url string) bool {
 		replacedString := origin
 		// if has regex whitelisted domains
 		if strings.Contains(origin, "*") {
-			replacedString = strings.Replace(origin, ".", "\\.", -1)
-			replacedString = strings.Replace(replacedString, "*", ".*", -1)
+			replacedString = strings.ReplaceAll(origin, ".", "\\.")
+			replacedString = strings.ReplaceAll(replacedString, "*", ".*")

 			if strings.HasPrefix(replacedString, ".*") {
 				replacedString += "\\b"
Author	SHA1	Message	Date
Lakhan Samani	ed849fa6f6	Merge branch 'main' of https://github.com/authorizerdev/authorizer	2022-09-14 10:44:09 +05:30
Lakhan Samani	aec1f5df53	fix: github endpoint to get user emails	2022-09-14 10:44:01 +05:30
Lakhan Samani	45b4c41bca	Merge pull request #228 from Deep-Codes/main	2022-09-10 11:40:11 +05:30
Deepankar	63d486821e	fix: lint	2022-09-10 11:39:01 +05:30
Deep-Codes	4b56afdc98	fix(type): __authorizer__ on window	2022-09-10 11:23:20 +05:30
Lakhan Samani	6455ff956a	fix: remove varible log	2022-09-10 10:52:56 +05:30
Lakhan Samani	3898e43fff	feat: add button to jwt config as json	2022-09-10 10:50:15 +05:30
Lakhan Samani	2c305e5bde	Update README.md	2022-09-09 10:24:30 +05:30
Lakhan Samani	b8fd08e576	Update README.md	2022-09-09 09:29:27 +05:30
Lakhan Samani	6dafa45051	fix: invalid login message Resolves #224	2022-09-03 21:48:33 +05:30
Lakhan Samani	ead3514113	chore: update railway template	2022-08-31 13:09:00 +05:30
Lakhan Samani	75a413e5f2	Merge branch 'main' of https://github.com/authorizerdev/authorizer	2022-08-31 11:02:50 +05:30
Lakhan Samani	91bf0e2478	fix: use replace all	2022-08-31 11:02:46 +05:30
Lakhan Samani	7a1305cf96	Merge pull request #222 from Deep-Codes/main	2022-08-31 07:04:20 +05:30
Deep-Codes	ff5a6ec301	feat(server): add log to show PORT	2022-08-30 23:35:43 +05:30
Lakhan Samani	b7b97b4f8d	Merge pull request #221 from Deep-Codes/main fix(dashboard): users table overflow	2022-08-30 22:38:49 +05:30
Deep-Codes	d9bc989c74	fix(dashboard): users table overflow	2022-08-30 21:56:28 +05:30
Lakhan Samani	d1f80d4088	feat: add support for twitter login	2022-08-29 08:37:53 +05:30
Lakhan Samani	4b299f0da2	fix: log	2022-08-29 08:19:11 +05:30
Lakhan Samani	ed8006db4c	Merge branch 'main' of https://github.com/authorizerdev/authorizer	2022-08-29 08:18:42 +05:30
Lakhan Samani	97f6c7d50a	fix: authorize endpoint setting user session	2022-08-29 08:18:20 +05:30
Lakhan Samani	5e3f68a180	Merge pull request #216 from szczepad/feat/twitter-login Feat/twitter login	2022-08-24 08:53:52 +05:30
szczepad	f73d1fc588	feat: Adds login via twitter	2022-08-22 09:25:10 +02:00
szczepad	aa232de426	fix: Uses whitespace as seperator for oauth scopes in state-string This is necessary, as the previous delimiter (,) was being redacted after a redirect. This resulted in the scopes not being correctly parseable and the state not being fetched correctly after the oauth-callback	2022-08-22 09:25:10 +02:00
Lakhan Samani	34ce754ef6	feat: bootstrap twitter login config	2022-08-22 09:03:29 +02:00
Lakhan Samani	5f385b2016	fix: remove unused file	2022-08-18 07:21:50 +05:30
Lakhan Samani	da7c17271e	Merge pull request #215 from wabscale/main fix: rootless container	2022-08-18 06:11:32 +05:30
John McCann Cunniff Jr	69fbd631ff	fix: rootless container	2022-08-17 20:33:05 -04:00
Lakhan Samani	deb209e358	Update README.md	2022-08-15 22:28:43 +05:30
Lakhan Samani	ea6b4cbc8d	Update README.md	2022-08-15 22:28:13 +05:30
Lakhan Samani	2f21a09b2e	chore: bump app/authorizer-react 1.0.0	2022-08-15 21:06:57 +05:30
Lakhan Samani	4ab775f2c1	fix: apple & linkedin env config	2022-08-13 12:37:04 +05:30
Lakhan Samani	b6e8023104	Merge pull request #211 from authorizerdev/fix/email-template fix email template	2022-08-13 11:58:07 +05:30
Lakhan Samani	4f1597e5d2	fix: update note on features	2022-08-13 11:57:03 +05:30
Lakhan Samani	4f81d1969e	fix email template - fix verification types - add design to cassandra db provider for email_template - fix default email verification types to include update_email	2022-08-13 11:34:24 +05:30
Lakhan Samani	ad3e615ac7	Merge pull request #210 from authorizerdev/fix/dashboard-ui Fix/dashboard UI	2022-08-13 03:57:19 +05:30
anik-ghosh-au7	e9a2301d2b	feat: [dashboard] add env options for multi factor auth	2022-08-11 17:50:45 +05:30
anik-ghosh-au7	48bbfa31af	fix: template editor design	2022-08-11 17:08:23 +05:30
anik-ghosh-au7	d7f5f563cc	fix: add design to email template	2022-08-11 16:45:59 +05:30
anik-ghosh-au7	6c29149fbe	fix: email template editor	2022-08-11 15:08:50 +05:30
Lakhan Samani	bbd4d43317	fix: add padding to editor	2022-08-09 12:10:50 +05:30
Lakhan Samani	c4d2f62657	fix: clear form on close	2022-08-09 11:55:55 +05:30
Lakhan Samani	5d78bf178f	fix: email template info	2022-08-09 11:41:51 +05:30
Lakhan Samani	58749497bd	fix: payload example for webhook	2022-08-09 10:04:06 +05:30
Lakhan Samani	5c6e643efb	Merge pull request #209 from authorizerdev/feat/send-email-based-on-template feat: send email based on template	2022-08-09 09:17:29 +05:30