fix: use raw base64 url decoding

fix: session invalidation

.dockerignore

@@ -9,3 +9,4 @@ build
 data.db
 app/node_modules
 app/build
+certs/

.env.sample

@@ -1,15 +1,4 @@
 ENV=production
 DATABASE_URL=data.db
 DATABASE_TYPE=sqlite
-ADMIN_SECRET=admin
+CUSTOM_ACCESS_TOKEN_SCRIPT="function(user,tokenPayload){var data = tokenPayload;data.extra = {'x-extra-id': user.id};return data;}"
-JWT_SECRET=random_string
-SENDER_EMAIL=username
-SENDER_PASSWORD=password
-SMTP_HOST=smtp.mailtrap.io
-SMTP_PORT=2525
-JWT_TYPE=HS256
-ROLES=user
-DEFAULT_ROLES=user
-PROTECTED_ROLES=admin
-JWT_ROLE_CLAIM=role
-CUSTOM_ACCESS_TOKEN_SCRIPT=function(user,tokenPayload){var data = tokenPayload;data.extra = {'x-extra-id': user.id};return data;}

.env.test

@@ -0,0 +1,9 @@
+ENV=test
+DATABASE_URL=test.db
+DATABASE_TYPE=sqlite
+CUSTOM_ACCESS_TOKEN_SCRIPT="function(user,tokenPayload){var data = tokenPayload;data.extra = {'x-extra-id': user.id};return data;}"
+SMTP_HOST=smtp.mailtrap.io
+SMTP_PORT=2525
+SMTP_USERNAME=test
+SMTP_PASSWORD=test
+SENDER_EMAIL="info@authorizer.dev"

.github/CONTRIBUTING.md

@@ -43,12 +43,14 @@ Please ask as many questions as you need, either directly in the issue or on [Di
 ### Project Setup for Authorizer core
 
 1. Fork the [authorizer](https://github.com/authorizerdev/authorizer) repository (**Skip this step if you have access to repo**)
-2. `git clone https://github.com/authorizerdev/authorizer.git`
+2. Clone repo: `git clone https://github.com/authorizerdev/authorizer.git` or use the forked url from step 1
-3. `cd authorizer`
+3. Change directory to authorizer: `cd authorizer`
-4. `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
+5. Create Env file `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
-5. Build the code `make clean && make`
+6. Build Dashboard `make build-dashboard`
+7. Build App `make build-app`
+8. Build Server `make clean && make`
    > Note: if you don't have [`make`](https://www.ibm.com/docs/en/aix/7.2?topic=concepts-make-command), you can `cd` into `server` dir and build using the `go build` command
-6. Run binary `./build/server`
+9. Run binary `./build/server`
 
 ### Testing
 
@@ -60,181 +62,170 @@ Setup mongodb & arangodb using Docker
 
 ```
 docker run --name mongodb -d -p 27017:27017 mongo
-docker run --name arangodb -d -p 8529:8529 -e ARANGO_ROOT_PASSWORD=root arangodb/arangodb:3.8.4
+
+// -e ARANGO_ROOT_PASSWORD=root
+docker run --name arangodb -d -p 8529:8529 -e ARANGO_NO_AUTH=1 arangodb/arangodb:3.8.4
 ```
+
 > Note: If you are not making any changes in db schema / db operations, you can disable those db tests [here](https://github.com/authorizerdev/authorizer/blob/main/server/__test__/resolvers_test.go#L14)
 
-If you are adding new resolver, 
+If you are adding new resolver,
+
 1. create new resolver test file [here](https://github.com/authorizerdev/authorizer/tree/main/server/__test__)
-Naming convention filename: `resolver_name_test.go` function name: `resolverNameTest(s TestSetup, t *testing.T)`
+   Naming convention filename: `resolver_name_test.go` function name: `resolverNameTest(t *testing.T, s TestSetup)`
 2. Add your tests [here](https://github.com/authorizerdev/authorizer/blob/main/server/__test__/resolvers_test.go#L38)
 
-__Command to run tests:__
+**Command to run tests:**
 
 ```sh
 make test
 ```
 
-__Manual Testing:__
+**Manual Testing:**
 
 For manually testing using graphql playground, you can paste following queries and mutations in your playground and test it
 
 ```gql
 mutation Signup {
-  signup(params: {
+	signup(
-    email: "lakhan@yopmail.com",
+		params: {
-    password: "test",
+			email: "lakhan@yopmail.com"
-    confirm_password: "test",
+			password: "test"
-    given_name: "lakhan"
+			confirm_password: "test"
-  }) {
+			given_name: "lakhan"
-    message
+		}
-    user {
+	) {
-      id
+		message
-      family_name
+		user {
-      given_name
+			id
-      email
+			family_name
-      email_verified
+			given_name
-    }
+			email
-  }
+			email_verified
+		}
+	}
 }
 
 mutation ResendEamil {
-  resend_verify_email(params: {
+	resend_verify_email(
-    email: "lakhan@yopmail.com"
+		params: { email: "lakhan@yopmail.com", identifier: "basic_auth_signup" }
-    identifier: "basic_auth_signup"
+	) {
-  }) {
+		message
-    message
+	}
-  }
 }
 
 query GetVerifyRequests {
-  _verification_requests {
+	_verification_requests {
-    id
+		id
-    token
+		token
-    expires
+		expires
-    identifier
+		identifier
-  }
+	}
 }
 
 mutation VerifyEmail {
-  verify_email(params: {
+	verify_email(params: { token: "" }) {
-    token: ""
+		access_token
-  }) {
+		expires_at
-    access_token
+		user {
-    expires_at
+			id
-    user {
+			email
-      id
+			given_name
-      email
+			email_verified
-      given_name
+		}
-      email_verified
+	}
-    }
-  }
 }
 
 mutation Login {
-  login(params: {
+	login(params: { email: "lakhan@yopmail.com", password: "test" }) {
-    email: "lakhan@yopmail.com",
+		access_token
-    password: "test"
+		expires_at
-  }) {
+		user {
-    access_token
+			id
-    expires_at
+			family_name
-    user {
+			given_name
-      id
+			email
-      family_name
+		}
-      given_name
+	}
-      email
-    }
-  }
 }
 
 query GetSession {
-  session {
+	session {
-    access_token
+		access_token
-    expires_at
+		expires_at
-    user {
+		user {
-      id
+			id
-      given_name
+			given_name
-      family_name
+			family_name
-      email
+			email
-      email_verified
+			email_verified
-      signup_methods
+			signup_methods
-      created_at
+			created_at
-      updated_at
+			updated_at
-    }
+		}
-  }
+	}
 }
 
 mutation ForgotPassword {
-  forgot_password(params: {
+	forgot_password(params: { email: "lakhan@yopmail.com" }) {
-    email: "lakhan@yopmail.com"
+		message
-  }) {
+	}
-    message
-  }
 }
 
 mutation ResetPassword {
-  reset_password(params: {
+	reset_password(
-    token: ""
+		params: { token: "", password: "test", confirm_password: "test" }
-    password: "test"
+	) {
-    confirm_password: "test"
+		message
-  }) {
+	}
-    message
-  }
 }
 
 mutation UpdateProfile {
-  update_profile(params: {
+	update_profile(params: { family_name: "samani" }) {
-    family_name: "samani"
+		message
-  }) {
+	}
-    message
-  }
 }
 
 query GetUsers {
-  _users {
+	_users {
-    id
+		id
-    email
+		email
-    email_verified
+		email_verified
-    given_name
+		given_name
-    family_name
+		family_name
-    picture
+		picture
-    signup_methods
+		signup_methods
-    phone_number
+		phone_number
-  }
+	}
 }
 
 mutation MagicLinkLogin {
-  magic_link_login(params: {
+	magic_link_login(params: { email: "test@yopmail.com" }) {
-    email: "test@yopmail.com"
+		message
-  }) {
+	}
-    message
-  }
 }
 
 mutation Logout {
-  logout {
+	logout {
-    message
+		message
-  }
+	}
 }
 
-mutation UpdateUser{
+mutation UpdateUser {
-  _update_user(params: {
+	_update_user(
-    id: "dafc9400-d603-4ade-997c-83fcd54bbd67",
+		params: {
-    roles: ["user", "admin"]
+			id: "dafc9400-d603-4ade-997c-83fcd54bbd67"
-  }) {
+			roles: ["user", "admin"]
-    email
+		}
-    roles
+	) {
-  }
+		email
+		roles
+	}
 }
 
 mutation DeleteUser {
-  _delete_user(params: {
+	_delete_user(params: { email: "signup.test134523@yopmail.com" }) {
-    email: "signup.test134523@yopmail.com"
+		message
-  }) {
+	}
-    message
-  }
 }
 ```
-
-
-

.github/workflows/release.yaml

@@ -1,4 +1,19 @@
 on:
+  workflow_dispatch:
+    inputs:
+      logLevel:
+        description: 'Log level'     
+        required: true
+        default: 'warning' 
+        type: choice
+        options:
+        - info
+        - warning
+        - debug 
+      tags:
+        description: 'Tags'
+        required: false 
+        type: boolean
   release:
     types: [created]
 
@@ -23,7 +38,8 @@ jobs:
           sudo mv github-assets-uploader /usr/sbin/ && \
           sudo rm -f github-assets-uploader.tar.gz && \
           github-assets-uploader -version && \
-          make build-app
+          make build-app && \
+          make build-dashboard
       - name: Print Go paths
         run: whereis go
       - name: Print Go Version
@@ -37,12 +53,12 @@ jobs:
           make clean && \
           CGO_ENABLED=1 GOOS=windows CC=/usr/bin/x86_64-w64-mingw32-gcc make && \
           mv build/server build/server.exe && \
-          zip -vr authorizer-${VERSION}-windows-amd64.zip .env app/build build templates
+          zip -vr authorizer-${VERSION}-windows-amd64.zip .env app/build build templates dashboard/build
       - name: Package files for linux
         run: |
           make clean && \
           CGO_ENABLED=1 make && \
-          tar cvfz authorizer-${VERSION}-linux-amd64.tar.gz .env app/build build templates
+          tar cvfz authorizer-${VERSION}-linux-amd64.tar.gz .env app/build build templates dashboard/build
       - name: Upload assets
         run: |
           github-assets-uploader -f authorizer-${VERSION}-windows-amd64.zip -mediatype application/zip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION} && \

.gitignore

@@ -3,9 +3,16 @@ server/.env
 data
 app/node_modules
 app/build
+dashboard/node_modules
+dashboard/build
 build
 .env
 data.db
+test.db
 .DS_Store
 .env.local
-*.tar.gz
+*.tar.gz
+.vscode/
+.yalc
+yalc.lock
+certs/

Dockerfile

@@ -14,14 +14,19 @@ RUN apk add build-base &&\
 FROM node:17-alpine3.12 as node-builder
 WORKDIR /authorizer
 COPY app app
+COPY dashboard dashboard
 COPY Makefile .
 RUN apk add build-base &&\
-    make build-app
+    make build-app && \
+    make build-dashboard
 
 FROM alpine:latest
 WORKDIR /root/
-RUN mkdir app
+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 templates templates
 EXPOSE 8080

Makefile

@@ -5,7 +5,12 @@ cmd:
 	cd server && go build -ldflags "-w -X main.VERSION=$(VERSION)" -o '../build/server'
 build-app:
 	cd app && npm i && npm run build
+build-dashboard:
+	cd dashboard && npm i && npm run build
 clean:
 	rm -rf build
 test:
-	cd server && go clean --testcache && go test -v ./__test__
+	rm -rf server/test/test.db && rm -rf test.db && cd server && go clean --testcache && go test -p 1 -v ./test
+generate:
+	cd server && go get github.com/99designs/gqlgen/cmd@v0.14.0 && go run github.com/99designs/gqlgen generate
+	

README.md

@@ -1,13 +1,13 @@
 <p align="center">
   <a href="https://authorizer.dev">
-    <img alt="Logo" src="https://github.com/authorizerdev/authorizer/blob/main/assets/logo.png" width="60" />
+    <img alt="Logo" src="https://authorizer.dev/images/logo.png" width="60" />
   </a>
 </p>
 <h1 align="center">
   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 [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/)).
 
 ## Table of contents
 
@@ -26,18 +26,16 @@
 - ✅ Sign-in / Sign-up with email ID and password
 - ✅ Secure session management
 - ✅ Email verification
+- ✅ OAuth2 and OpenID compatible APIs
 - ✅ APIs to update profile securely
 - ✅ Forgot password flow using email
 - ✅ Social logins (Google, Github, Facebook, more coming soon)
 - ✅ Role-based access management
-- ✅ Password-less login with email and magic link
+- ✅ Password-less login with magic link login
 
 ## Roadmap
 
-- Support more JWT encryption algorithms (Currently supporting HS256)
 - 2 Factor authentication
-- Back office (Admin dashboard to manage user)
-- Support more database
 - VueJS SDK
 - Svelte SDK
 - React Native SDK
@@ -59,33 +57,42 @@
 
 # Getting Started
 
-## Trying out Authorizer
+## Step 1: Get Authorizer Instance
+
+### Deploy Production Ready Instance
+
+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)  |
+
+### Deploy Authorizer Using Source Code
 
 This guide helps you practice using Authorizer to evaluate it before you use it in a production environment. It includes instructions for installing the Authorizer server in local or standalone mode.
 
-- [Install using source code](#install-using-source-code)
+#### Install using source code
-- [Install using binaries](#install-using-binaries)
-- [Install instance on heroku](#install-instance-on-Heroku)
-- [Install instance on railway.app](#install-instance-on-railway)
 
-## Install using source code
+#### Prerequisites
-
-### Prerequisites
 
 - OS: Linux or macOS or windows
 - Go: (Golang)(https://golang.org/dl/) >= v1.15
 
-### Project Setup
+#### Project Setup
 
 1. Fork the [authorizer](https://github.com/authorizerdev/authorizer) repository (**Skip this step if you have access to repo**)
-2. `git clone https://github.com/authorizerdev/authorizer.git`
+2. Clone repo: `git clone https://github.com/authorizerdev/authorizer.git` or use the forked url from step 1
-3. `cd authorizer`
+3. Change directory to authorizer: `cd authorizer`
-4. `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
+4. Create Env file `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
-5. Build the code `make clean && make`
+5. Build Dashboard `make build-dashboard`
+6. Build App `make build-app`
+7. Build Server `make clean && make`
    > Note: if you don't have [`make`](https://www.ibm.com/docs/en/aix/7.2?topic=concepts-make-command), you can `cd` into `server` dir and build using the `go build` command
-6. Run binary `./build/server`
+8. Run binary `./build/server`
 
-## Install using binaries
+### Deploy Authorizer using binaries
 
 Deploy / Try Authorizer using binaries. With each [Authorizer Release](https://github.com/authorizerdev/authorizer/releases)
 binaries are baked with required deployment files and bundled. You can download a specific version of it for the following operating systems:
@@ -93,7 +100,7 @@ binaries are baked with required deployment files and bundled. You can download
 - Mac OSX
 - Linux
 
-### Step 1: Download and unzip bundle
+#### Download and unzip bundle
 
 - Download the Bundle for the specific OS from the [release page](https://github.com/authorizerdev/authorizer/releases)
 
@@ -113,11 +120,7 @@ binaries are baked with required deployment files and bundled. You can download
   cd authorizer
   ```
 
-### Step 2: Configure environment variables
+#### Step 3: Start Authorizer
-
-Required environment variables are pre-configured in `.env` file. But based on the production requirements, please configure more environment variables. You can refer to [environment variables docs](/core/env) for more information.
-
-### Step 3: Start Authorizer
 
 - Run following command to start authorizer
 
@@ -129,25 +132,20 @@ Required environment variables are pre-configured in `.env` file. But based on t
 
 > Note: For mac users, you might have to give binary the permission to execute. Here is the command you can use to grant permission `xattr -d com.apple.quarantine build/server`
 
-## Install instance on Heroku
+## Step 2: Setup Instance
 
-Deploy Authorizer using [heroku](https://github.com/authorizerdev/authorizer-heroku) and quickly play with it in 30seconds
+- Open authorizer instance endpoint in browser
-<br/><br/>
+- Sign up as an admin with a secure password
-[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/authorizerdev/authorizer-heroku)
+- Configure environment variables from authorizer dashboard. Check env [docs](/core/env) for more information
 
-# Install instance on railway
+> Note: `DATABASE_URL`, `DATABASE_TYPE` and `DATABASE_NAME` are only configurable via platform envs
-
-Deploy production ready Authorizer instance using [railway.app](https://github.com/authorizerdev/authorizer-railway) with postgres and redis for free and build with it in 30seconds
-<br/>
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Fauthorizerdev%2Fauthorizer-railway&plugins=postgresql%2Credis&envs=ENV%2CDATABASE_TYPE%2CADMIN_SECRET%2CCOOKIE_NAME%2CJWT_ROLE_CLAIM%2CJWT_TYPE%2CJWT_SECRET%2CFACEBOOK_CLIENT_ID%2CFACEBOOK_CLIENT_SECRET%2CGOOGLE_CLIENT_ID%2CGOOGLE_CLIENT_SECRET%2CGITHUB_CLIENT_ID%2CGITHUB_CLIENT_SECRET%2CALLOWED_ORIGINS%2CROLES%2CPROTECTED_ROLES%2CDEFAULT_ROLES&optionalEnvs=FACEBOOK_CLIENT_ID%2CFACEBOOK_CLIENT_SECRET%2CGOOGLE_CLIENT_ID%2CGOOGLE_CLIENT_SECRET%2CGITHUB_CLIENT_ID%2CGITHUB_CLIENT_SECRET%2CALLOWED_ORIGINS%2CROLES%2CPROTECTED_ROLES%2CDEFAULT_ROLES&ENVDesc=Deployment+environment&DATABASE_TYPEDesc=With+railway+we+are+deploying+postgres+db&ADMIN_SECRETDesc=Secret+to+access+the+admin+apis&COOKIE_NAMEDesc=Name+of+http+only+cookie+that+will+be+used+as+session&FACEBOOK_CLIENT_IDDesc=Facebook+client+ID+for+facebook+login&FACEBOOK_CLIENT_SECRETDesc=Facebook+client+secret+for+facebook+login&GOOGLE_CLIENT_IDDesc=Google+client+ID+for+google+login&GOOGLE_CLIENT_SECRETDesc=Google+client+secret+for+google+login&GITHUB_CLIENT_IDDesc=Github+client+ID+for+github+login&GITHUB_CLIENT_SECRETDesc=Github+client+secret+for+github+login&ALLOWED_ORIGINSDesc=Whitelist+the+URL+for+which+this+instance+of+authorizer+is+allowed&ROLESDesc=Comma+separated+list+of+roles+that+platform+supports.+Default+role+is+user&PROTECTED_ROLESDesc=Comma+separated+list+of+protected+roles+for+which+sign-up+is+disabled&DEFAULT_ROLESDesc=Default+role+that+should+be+assigned+to+user.+It+should+be+one+from+the+list+of+%60ROLES%60+env.+Default+role+is+user&JWT_ROLE_CLAIMDesc=JWT+key+to+be+used+to+validate+the+role+field.&JWT_TYPEDesc=JWT+encryption+type&JWT_SECRETDesc=Random+string+that+will+be+used+for+encrypting+the+JWT+token&ENVDefault=PRODUCTION&DATABASE_TYPEDefault=postgres&COOKIE_NAMEDefault=authorizer&JWT_TYPEDefault=HS256&JWT_ROLE_CLAIMDefault=role)
 
 ### Things to consider
 
 - For social logins, you will need respective social platform key and secret
 - For having verified users, you will need an SMTP server with an email address and password using which system can send emails. The system will send a verification link to an email address. Once an email is verified then, only able to access it.
   > Note: One can always disable the email verification to allow open sign up, which is not recommended for production as anyone can use anyone's email address 😅
-- For persisting user sessions, you will need Redis URL (not in case of railway.app). If you do not configure a Redis server, sessions will be persisted until the instance is up or not restarted. For better response time on authorization requests/middleware, we recommend deploying Redis on the same infra/network as your authorizer server.
+- For persisting user sessions, you will need Redis URL (not in case of railway app). If you do not configure a Redis server, sessions will be persisted until the instance is up or not restarted. For better response time on authorization requests/middleware, we recommend deploying Redis on the same infra/network as your authorizer server.
 
 ## Testing
 
@@ -166,8 +164,9 @@ This example demonstrates how you can use [`@authorizerdev/authorizer-js`](/auth
 
 <script type="text/javascript">
 	const authorizerRef = new authorizerdev.Authorizer({
-		authorizerURL: `AUTHORIZER_URL`,
+		authorizerURL: `YOUR_AUTHORIZER_INSTANCE_URL`,
 		redirectURL: window.location.origin,
+		clientID: 'YOUR_CLIENT_ID', // obtain your client id from authorizer dashboard
 	});
 
 	// use the button selector as per your application
@@ -178,15 +177,19 @@ This example demonstrates how you can use [`@authorizerdev/authorizer-js`](/auth
 	});
 
 	async function onLoad() {
-		const res = await authorizerRef.browserLogin();
+		const res = await authorizerRef.authorize({
-		if (res && res.user) {
+			response_type: 'code',
+			use_refresh_token: false,
+		});
+		if (res && res.access_token) {
 			// you can use user information here, eg:
-			/**
+			const user = await authorizerRef.getProfile({
-      const userSection = document.getElementById('user');
+				Authorization: `Bearer ${res.access_token}`,
-      const logoutSection = document.getElementById('logout-section');
+			});
-      logoutSection.classList.toggle('hide');
+			const userSection = document.getElementById('user');
-      userSection.innerHTML = `Welcome, ${res.user.email}`;
+			const logoutSection = document.getElementById('logout-section');
-      */
+			logoutSection.classList.toggle('hide');
+			userSection.innerHTML = `Welcome, ${user.email}`;
 		}
 	}
 	onLoad();

TODO.md

@@ -1,5 +1,16 @@
 # Task List
 
+## Implement better way of handling jwt tokens
+
+Check: https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#server-side-rendering-ssr
+
+- [x] Set finger print in response cookie (https://github.com/hasura/jwt-guide/blob/60a7a86146d604fc48a799fffdee712be1c52cd0/lib/setFingerprintCookieAndSignJwt.ts#L8)
+- [x] Save refresh token in session store
+- [x] refresh token should be made more secure with the help of secure token rotation. Every time new token is requested new refresh token should be generated
+- [x] Return jwt in response
+- [x] To get session send finger print and refresh token [if they are valid -> a new access token is generated and sent to user]
+- [x] Refresh token should be long living token (refresh token + finger print hash should be verified)
+
 ## Open ID compatible claims and schema
 
 - [x] Rename `schema.graphqls` and re generate schema

app/README.md

@@ -1,3 +1,14 @@
 # Authorizer APP
 
-App that can be used as login wall for your any application in combination with @authorizerdev/@authorizer.js
+App that can be used as login wall for your any application in combination with @authorizerdev/@authorizer.js
+
+### Getting started
+
+**Setting up locally**
+
+- `cd app`
+- `npm start`
+
+**Creating production build**
+
+- `make build-app`

app/package.json

@@ -1,27 +1,29 @@
 {
-	"name": "app",
+  "name": "app",
-	"version": "1.0.0",
+  "version": "1.0.0",
-	"description": "",
+  "description": "",
-	"main": "index.js",
+  "main": "index.js",
-	"scripts": {
+  "scripts": {
-		"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
+    "build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
-		"start": "NODE_ENV=development node ./esbuild.config.js"
+    "start": "NODE_ENV=development node ./esbuild.config.js"
-	},
+  },
-	"keywords": [],
+  "keywords": [],
-	"author": "Lakhan Samani",
+  "author": "Lakhan Samani",
-	"license": "ISC",
+  "license": "ISC",
-	"dependencies": {
+  "dependencies": {
-		"@authorizerdev/authorizer-react": "latest",
+    "@authorizerdev/authorizer-react": "^0.24.0-beta.2",
-		"@types/react": "^17.0.15",
+    "@types/react": "^17.0.15",
-		"@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.9",
-		"esbuild": "^0.12.17",
+    "esbuild": "^0.12.17",
-		"react": "^17.0.2",
+    "react": "^17.0.2",
-		"react-dom": "^17.0.2",
+    "react-dom": "^17.0.2",
-		"react-is": "^17.0.2",
+    "react-is": "^17.0.2",
-		"react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.2.0",
-		"typescript": "^4.3.5"
+    "typescript": "^4.3.5",
-	},
+    "styled-components": "^5.3.0"
-	"devDependencies": {
+  },
-		"@types/react-router-dom": "^5.1.8"
+  "devDependencies": {
-	}
+    "@types/react-router-dom": "^5.1.8",
+    "@types/styled-components": "^5.1.11"
+  }
 }

app/src/App.tsx

@@ -2,10 +2,33 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { AuthorizerProvider } from '@authorizerdev/authorizer-react';
 import Root from './Root';
+import { createRandomString } from './utils/common';
 
 export default function App() {
-	// @ts-ignore
+	const searchParams = new URLSearchParams(window.location.search);
-	const globalState: Record<string, string> = window['__authorizer__'];
+	const state = searchParams.get('state') || createRandomString();
+	const scope = searchParams.get('scope')
+		? searchParams.get('scope')?.toString().split(' ')
+		: `openid profile email`;
+
+	const urlProps: Record<string, any> = {
+		state,
+		scope,
+	};
+
+	const redirectURL =
+		searchParams.get('redirect_uri') || searchParams.get('redirectURL');
+	if (redirectURL) {
+		urlProps.redirectURL = redirectURL;
+	} else {
+		urlProps.redirectURL = window.location.origin + '/app';
+	}
+	const globalState: Record<string, string> = {
+		// @ts-ignore
+		...window['__authorizer__'],
+		...urlProps,
+	};
+
 	return (
 		<div
 			style={{
@@ -30,23 +53,15 @@ export default function App() {
 				/>
 				<h1>{globalState.organizationName}</h1>
 			</div>
-			<div
+			<div className="container">
-				style={{
-					width: 400,
-					margin: `10px auto`,
-					border: `1px solid #D1D5DB`,
-					padding: `25px 20px`,
-					borderRadius: 5,
-				}}
-			>
 				<BrowserRouter>
 					<AuthorizerProvider
 						config={{
-							authorizerURL: globalState.authorizerURL,
+							authorizerURL: window.location.origin,
 							redirectURL: globalState.redirectURL,
 						}}
 					>
-						<Root />
+						<Root globalState={globalState} />
 					</AuthorizerProvider>
 				</BrowserRouter>
 			</div>

app/src/Root.tsx

@@ -1,19 +1,76 @@
 import React, { useEffect, lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { useAuthorizer } from '@authorizerdev/authorizer-react';
+import styled, { ThemeProvider } from 'styled-components';
+import SetupPassword from './pages/setup-password';
+import { hasWindow, createRandomString } from './utils/common';
+import { theme } from './theme';
 
 const ResetPassword = lazy(() => import('./pages/rest-password'));
 const Login = lazy(() => import('./pages/login'));
 const Dashboard = lazy(() => import('./pages/dashboard'));
+const SignUp = lazy(() => import('./pages/signup'));
 
-export default function Root() {
+const Wrapper = styled.div`
+	font-family: ${(props) => props.theme.fonts.fontStack};
+	color: ${(props) => props.theme.colors.textColor};
+	font-size: ${(props) => props.theme.fonts.mediumText};
+	box-sizing: border-box;
+
+	*,
+	*:before,
+	*:after {
+		box-sizing: inherit;
+	}
+`;
+
+export default function Root({
+	globalState,
+}: {
+	globalState: Record<string, string>;
+}) {
 	const { token, loading, config } = useAuthorizer();
 
+	const searchParams = new URLSearchParams(
+		hasWindow() ? window.location.search : ``
+	);
+	const state = searchParams.get('state') || createRandomString();
+	const scope = searchParams.get('scope')
+		? searchParams.get('scope')?.toString().split(' ')
+		: ['openid', 'profile', 'email'];
+
+	const urlProps: Record<string, any> = {
+		state,
+		scope,
+	};
+
+	const redirectURL =
+		searchParams.get('redirect_uri') || searchParams.get('redirectURL');
+	if (redirectURL) {
+		urlProps.redirectURL = redirectURL;
+	} else {
+		urlProps.redirectURL = hasWindow() ? window.location.origin : redirectURL;
+	}
+
+	urlProps.redirect_uri = urlProps.redirectURL;
+
 	useEffect(() => {
 		if (token) {
-			const url = new URL(config.redirectURL || '/app');
+			let redirectURL = config.redirectURL || '/app';
+			let params = `access_token=${token.access_token}&id_token=${token.id_token}&expires_in=${token.expires_in}&state=${globalState.state}`;
+			if (token.refresh_token) {
+				params += `&refresh_token=${token.refresh_token}`;
+			}
+			const url = new URL(redirectURL);
+			if (redirectURL.includes('?')) {
+				redirectURL = `${redirectURL}&${params}`;
+			} else {
+				redirectURL = `${redirectURL}?${params}`;
+			}
+
 			if (url.origin !== window.location.origin) {
-				window.location.href = config.redirectURL || '/app';
+				sessionStorage.removeItem('authorizer_state');
+				window.location.replace(redirectURL);
 			}
 		}
 		return () => {};
@@ -37,14 +94,24 @@ export default function Root() {
 
 	return (
 		<Suspense fallback={<></>}>
-			<Switch>
+			<ThemeProvider theme={theme}>
-				<Route path="/app" exact>
+				<Wrapper>
-					<Login />
+					<Switch>
-				</Route>
+						<Route path="/app" exact>
-				<Route path="/app/reset-password">
+							<Login urlProps={urlProps} />
-					<ResetPassword />
+						</Route>
-				</Route>
+						<Route path="/app/signup" exact>
-			</Switch>
+							<SignUp urlProps={urlProps} />
+						</Route>
+						<Route path="/app/reset-password">
+							<ResetPassword />
+						</Route>
+						<Route path="/app/setup-password">
+							<SetupPassword />
+						</Route>
+					</Switch>
+				</Wrapper>
+			</ThemeProvider>
 		</Suspense>
 	);
 }

app/src/index.css

@@ -1,5 +1,5 @@
 body {
-	margin: 0;
+	margin: 10;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 		sans-serif;
@@ -14,3 +14,17 @@ body {
 *:after {
 	box-sizing: inherit;
 }
+
+.container {
+	box-sizing: content-box;
+	border: 1px solid #d1d5db;
+	padding: 25px 20px;
+	border-radius: 5px;
+}
+
+@media only screen and (min-width: 768px) {
+	.container {
+		width: 400px;
+		margin: 0 auto;
+	}
+}

app/src/pages/dashboard.tsx

@@ -15,7 +15,7 @@ export default function Dashboard() {
 	return (
 		<div>
 			<h1>Hey 👋,</h1>
-			<p>Thank you for joining authorizer demo app.</p>
+			<p>Thank you for using authorizer.</p>
 			<p>
 				Your email address is{' '}
 				<a href={`mailto:${user?.email}`} style={{ color: '#3B82F6' }}>

app/src/pages/login.tsx

@@ -1,10 +1,84 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
-import { Authorizer } from '@authorizerdev/authorizer-react';
+import {
+	AuthorizerBasicAuthLogin,
+	AuthorizerForgotPassword,
+	AuthorizerMagicLinkLogin,
+	AuthorizerSocialLogin,
+	useAuthorizer,
+} from '@authorizerdev/authorizer-react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
-export default function Login() {
+const enum VIEW_TYPES {
+	LOGIN = 'login',
+	FORGOT_PASSWORD = 'forgot-password',
+}
+
+const Footer = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-top: 15px;
+`;
+
+const FooterContent = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 10px;
+`;
+
+export default function Login({ urlProps }: { urlProps: Record<string, any> }) {
+	const { config } = useAuthorizer();
+	const [view, setView] = useState<VIEW_TYPES>(VIEW_TYPES.LOGIN);
 	return (
 		<Fragment>
-			<Authorizer />
+			{view === VIEW_TYPES.LOGIN && (
+				<Fragment>
+					<h1 style={{ textAlign: 'center' }}>Login</h1>
+					<br />
+					<AuthorizerSocialLogin urlProps={urlProps} />
+					{config.is_basic_authentication_enabled &&
+						!config.is_magic_link_login_enabled && (
+							<AuthorizerBasicAuthLogin urlProps={urlProps} />
+						)}
+					{config.is_magic_link_login_enabled && (
+						<AuthorizerMagicLinkLogin urlProps={urlProps} />
+					)}
+					<Footer>
+						<Link
+							to="#"
+							onClick={() => setView(VIEW_TYPES.FORGOT_PASSWORD)}
+							style={{ marginBottom: 10 }}
+						>
+							Forgot Password?
+						</Link>
+					</Footer>
+				</Fragment>
+			)}
+			{view === VIEW_TYPES.FORGOT_PASSWORD && (
+				<Fragment>
+					<h1 style={{ textAlign: 'center' }}>Forgot Password</h1>
+					<AuthorizerForgotPassword urlProps={urlProps} />
+					<Footer>
+						<Link
+							to="#"
+							onClick={() => setView(VIEW_TYPES.LOGIN)}
+							style={{ marginBottom: 10 }}
+						>
+							Back
+						</Link>
+					</Footer>
+				</Fragment>
+			)}
+			{config.is_basic_authentication_enabled &&
+				!config.is_magic_link_login_enabled &&
+				config.is_sign_up_enabled && (
+					<FooterContent>
+						Don't have an account? <Link to="/app/signup"> Sign Up</Link>
+					</FooterContent>
+				)}
 		</Fragment>
 	);
 }

app/src/pages/setup-password.tsx

@@ -0,0 +1,12 @@
+import React, { Fragment } from 'react';
+import { AuthorizerResetPassword } from '@authorizerdev/authorizer-react';
+
+export default function SetupPassword() {
+	return (
+		<Fragment>
+			<h1 style={{ textAlign: 'center' }}>Setup new Password</h1>
+			<br />
+			<AuthorizerResetPassword />
+		</Fragment>
+	);
+}

app/src/pages/signup.tsx

@@ -0,0 +1,28 @@
+import React, { Fragment } from 'react';
+import { AuthorizerSignup } from '@authorizerdev/authorizer-react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const FooterContent = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 20px;
+`;
+
+export default function SignUp({
+	urlProps,
+}: {
+	urlProps: Record<string, any>;
+}) {
+	return (
+		<Fragment>
+			<h1 style={{ textAlign: 'center' }}>Sign Up</h1>
+			<br />
+			<AuthorizerSignup urlProps={urlProps} />
+			<FooterContent>
+				Already have an account? <Link to="/app"> Login</Link>
+			</FooterContent>
+		</Fragment>
+	);
+}

app/src/theme.ts

@@ -0,0 +1,28 @@
+// colors: https://tailwindcss.com/docs/customizing-colors
+
+export const theme = {
+  colors: {
+    primary: '#3B82F6',
+    primaryDisabled: '#60A5FA',
+    gray: '#D1D5DB',
+    danger: '#DC2626',
+    success: '#10B981',
+    textColor: '#374151',
+  },
+  fonts: {
+    // typography
+    fontStack: '-apple-system, system-ui, sans-serif',
+
+    // font sizes
+    largeText: '18px',
+    mediumText: '14px',
+    smallText: '12px',
+    tinyText: '10px',
+  },
+
+  radius: {
+    card: '5px',
+    button: '5px',
+    input: '5px',
+  },
+};

app/src/utils/common.ts

@@ -0,0 +1,24 @@
+export const getCrypto = () => {
+	//ie 11.x uses msCrypto
+	return (window.crypto || (window as any).msCrypto) as Crypto;
+};
+
+export const createRandomString = () => {
+	const charset =
+		'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_~.';
+	let random = '';
+	const randomValues = Array.from(
+		getCrypto().getRandomValues(new Uint8Array(43))
+	);
+	randomValues.forEach((v) => (random += charset[v % charset.length]));
+	return random;
+};
+
+export const createQueryParams = (params: any) => {
+	return Object.keys(params)
+		.filter((k) => typeof params[k] !== 'undefined')
+		.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+		.join('&');
+};
+
+export const hasWindow = (): boolean => typeof window !== 'undefined';

dashboard/README.md

@@ -0,0 +1,12 @@
+# Authorizer dashboard
+
+### Getting started
+
+**Setting up locally**
+
+- `cd dashboard`
+- `npm start`
+
+**Creating production build**
+
+- `make build-dashboard`

dashboard/esbuild.config.js

@@ -0,0 +1,12 @@
+const __is_prod__ = process.env.NODE_ENV === 'production';
+require('esbuild').build({
+	entryPoints: ['src/index.tsx'],
+	chunkNames: '[name]-[hash]',
+	bundle: true,
+	minify: __is_prod__,
+	outdir: 'build',
+	splitting: true,
+	format: 'esm',
+	watch: !__is_prod__,
+	logLevel: 'info',
+});

dashboard/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "dashboard",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
+		"start": "NODE_ENV=development node ./esbuild.config.js"
+	},
+	"keywords": [],
+	"author": "Lakhan Samani",
+	"license": "ISC",
+	"dependencies": {
+		"@chakra-ui/react": "^1.7.3",
+		"@emotion/core": "^11.0.0",
+		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.6.0",
+		"@types/react": "^17.0.38",
+		"@types/react-dom": "^17.0.11",
+		"@types/react-router-dom": "^5.3.2",
+		"dayjs": "^1.10.7",
+		"esbuild": "^0.14.9",
+		"focus-visible": "^5.2.0",
+		"framer-motion": "^5.5.5",
+		"graphql": "^16.2.0",
+		"lodash": "^4.17.21",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"react-dropzone": "^12.0.4",
+		"react-icons": "^4.3.1",
+		"react-router-dom": "^6.2.1",
+		"typescript": "^4.5.4",
+		"urql": "^2.0.6"
+	}
+}

dashboard/public/sample.csv

@@ -0,0 +1 @@
+foo@bar.com,test@authorizer.dev

dashboard/src/App.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Fragment } from 'react';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import { BrowserRouter } from 'react-router-dom';
+import { createClient, Provider } from 'urql';
+import { AppRoutes } from './routes';
+import { AuthContextProvider } from './contexts/AuthContext';
+
+const queryClient = createClient({
+	url: '/graphql',
+	fetchOptions: () => {
+		return {
+			credentials: 'include',
+			headers: {
+				'x-authorizer-url': window.location.origin,
+			},
+		};
+	},
+	requestPolicy: 'network-only',
+});
+
+const theme = extendTheme({
+	styles: {
+		global: {
+			'html, body, #root': {
+				height: '100%',
+				outline: 'none',
+			},
+		},
+	},
+	colors: {
+		blue: {
+			500: 'rgb(59,130,246)',
+		},
+	},
+});
+
+export default function App() {
+	return (
+		<Fragment>
+			<ChakraProvider theme={theme}>
+				<Provider value={queryClient}>
+					<BrowserRouter basename="/dashboard">
+						<AuthContextProvider>
+							<AppRoutes />
+						</AuthContextProvider>
+					</BrowserRouter>
+				</Provider>
+			</ChakraProvider>
+		</Fragment>
+	);
+}

dashboard/src/components/DeleteUserModal.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	MenuItem,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	useDisclosure,
+	Text,
+	useToast,
+} from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { DeleteUser } from '../graphql/mutation';
+import { capitalizeFirstLetter } from '../utils';
+
+interface userDataTypes {
+	id: string;
+	email: string;
+}
+
+const DeleteUserModal = ({
+	user,
+	updateUserList,
+}: {
+	user: userDataTypes;
+	updateUserList: Function;
+}) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [userData, setUserData] = React.useState<userDataTypes>({
+		id: '',
+		email: '',
+	});
+	React.useEffect(() => {
+		setUserData(user);
+	}, []);
+	const deleteHandler = async () => {
+		const res = await client
+			.mutation(DeleteUser, { params: { email: userData.email } })
+			.toPromise();
+		if (res.error) {
+			toast({
+				title: capitalizeFirstLetter(res.error.message),
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+
+			return;
+		} else if (res.data?._delete_user) {
+			toast({
+				title: capitalizeFirstLetter(res.data?._delete_user.message),
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		}
+		onClose();
+		updateUserList();
+	};
+	return (
+		<>
+			<MenuItem onClick={onOpen}>Delete User</MenuItem>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Delete User</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Text fontSize="md">Are you sure?</Text>
+						<Flex
+							padding="5%"
+							marginTop="5%"
+							marginBottom="2%"
+							border="1px solid #ff7875"
+							borderRadius="5px"
+							flexDirection="column"
+						>
+							<Text fontSize="sm">
+								User <b>{user.email}</b> will be deleted permanently!
+							</Text>
+						</Flex>
+					</ModalBody>
+
+					<ModalFooter>
+						<Button
+							leftIcon={<FaRegTrashAlt />}
+							colorScheme="red"
+							variant="solid"
+							onClick={deleteHandler}
+							isDisabled={false}
+						>
+							<Center h="100%" pt="5%">
+								Delete
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default DeleteUserModal;

dashboard/src/components/EditUserModal.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	MenuItem,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Stack,
+	useDisclosure,
+	Text,
+	useToast,
+} from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaSave } from 'react-icons/fa';
+import InputField from './InputField';
+import {
+	ArrayInputType,
+	DateInputType,
+	SelectInputType,
+	TextInputType,
+} from '../constants';
+import { getObjectDiff } from '../utils';
+import { UpdateUser } from '../graphql/mutation';
+
+const GenderTypes = {
+	Undisclosed: null,
+	Male: 'Male',
+	Female: 'Female',
+};
+
+interface userDataTypes {
+	id: string;
+	email: string;
+	given_name: string;
+	family_name: string;
+	middle_name: string;
+	nickname: string;
+	gender: string;
+	birthdate: string;
+	phone_number: string;
+	picture: string;
+	roles: [string] | [];
+}
+
+const EditUserModal = ({
+	user,
+	updateUserList,
+}: {
+	user: userDataTypes;
+	updateUserList: Function;
+}) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [userData, setUserData] = React.useState<userDataTypes>({
+		id: '',
+		email: '',
+		given_name: '',
+		family_name: '',
+		middle_name: '',
+		nickname: '',
+		gender: '',
+		birthdate: '',
+		phone_number: '',
+		picture: '',
+		roles: [],
+	});
+	React.useEffect(() => {
+		setUserData(user);
+	}, []);
+	const saveHandler = async () => {
+		const diff = getObjectDiff(user, userData);
+		const updatedUserData = diff.reduce(
+			(acc: any, property: string) => ({
+				...acc,
+				// @ts-ignore
+				[property]: userData[property],
+			}),
+			{}
+		);
+		const res = await client
+			.mutation(UpdateUser, { params: { ...updatedUserData, id: userData.id } })
+			.toPromise();
+		if (res.error) {
+			toast({
+				title: 'User data update failed',
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+		} else if (res.data?._update_user?.id) {
+			toast({
+				title: 'User data update successful',
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		}
+		onClose();
+		updateUserList();
+	};
+	return (
+		<>
+			<MenuItem onClick={onOpen}>Edit User Details</MenuItem>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Edit User Details</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Stack>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Given Name:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.GIVEN_NAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Middle Name:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.MIDDLE_NAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Family Name:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.FAMILY_NAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Birth Date:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={DateInputType.BIRTHDATE}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Nickname:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.NICKNAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Gender:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={SelectInputType.GENDER}
+										value={userData.gender}
+										options={GenderTypes}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Phone Number:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.PHONE_NUMBER}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Picture:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.PICTURE}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Roles:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={ArrayInputType.USER_ROLES}
+									/>
+								</Center>
+							</Flex>
+						</Stack>
+					</ModalBody>
+
+					<ModalFooter>
+						<Button
+							leftIcon={<FaSave />}
+							colorScheme="blue"
+							variant="solid"
+							onClick={saveHandler}
+							isDisabled={false}
+						>
+							<Center h="100%" pt="5%">
+								Save
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default EditUserModal;

dashboard/src/components/EnvComponents/AccessToken.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Flex, Stack, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../../components/InputField";
+import { TextInputType, TextAreaInputType } from "../../constants";
+
+const AccessToken = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Access Token
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "50%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Access Token Expiry Time:</Text>
+          </Flex>
+          <Flex
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.ACCESS_TOKEN_EXPIRY_TIME}
+              placeholder="0h15m0s"
+            />
+          </Flex>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "60%"}
+            justifyContent="start"
+            direction="column"
+          >
+            <Text fontSize="sm">Custom Scripts:</Text>
+            <Text fontSize="xs" color="blackAlpha.500">
+              (Used to add custom fields in ID token)
+            </Text>
+          </Flex>
+          <Flex
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextAreaInputType.CUSTOM_ACCESS_TOKEN_SCRIPT}
+              placeholder="Add script here"
+              minH="25vh"
+            />
+          </Flex>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default AccessToken;

dashboard/src/components/EnvComponents/DatabaseCredentials.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
+
+import InputField from '../../components/InputField';
+import { TextInputType } from '../../constants';
+
+const DatabaseCredentials = ({ variables, setVariables }: any) => {
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+	return (
+		<div>
+			{' '}
+			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
+				Database Credentials
+			</Text>
+			<Stack spacing={6} padding="3% 0">
+				<Text fontStyle="italic" fontSize="sm" color="blackAlpha.500" mt={3}>
+					Note: Database related environment variables cannot be updated from
+					dashboard. Please use .env file or OS environment variables to update
+					it.
+				</Text>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex
+						w={isNotSmallerScreen ? '30%' : '40%'}
+						justifyContent="start"
+						alignItems="center"
+					>
+						<Text fontSize="sm">DataBase Name:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '3'}
+					>
+						<InputField
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={TextInputType.DATABASE_NAME}
+							isDisabled={true}
+						/>
+					</Center>
+				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex
+						w={isNotSmallerScreen ? '30%' : '40%'}
+						justifyContent="start"
+						alignItems="center"
+					>
+						<Text fontSize="sm">DataBase Type:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '3'}
+					>
+						<InputField
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={TextInputType.DATABASE_TYPE}
+							isDisabled={true}
+						/>
+					</Center>
+				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex
+						w={isNotSmallerScreen ? '30%' : '40%'}
+						justifyContent="start"
+						alignItems="center"
+					>
+						<Text fontSize="sm">DataBase URL:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '3'}
+					>
+						<InputField
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={TextInputType.DATABASE_URL}
+							isDisabled={true}
+						/>
+					</Center>
+				</Flex>
+			</Stack>
+		</div>
+	);
+};
+
+export default DatabaseCredentials;

dashboard/src/components/EnvComponents/DomainWhitelisting.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../../components/InputField";
+import { ArrayInputType} from "../../constants";
+
+const DomainWhiteListing = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Domain White Listing
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">Allowed Origins:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              variables={variables}
+              setVariables={setVariables}
+              inputType={ArrayInputType.ALLOWED_ORIGINS}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default DomainWhiteListing;

dashboard/src/components/EnvComponents/EmailConfiguration.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../../components/InputField";
+import { TextInputType, HiddenInputType} from "../../constants";
+const EmailConfigurations = ({
+  variables,
+  setVariables,
+  fieldVisibility,
+  setFieldVisibility,
+}: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Email Configurations
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">SMTP Host:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SMTP_HOST}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">SMTP Port:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SMTP_PORT}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">SMTP Username:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SMTP_USERNAME}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">SMTP Password:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              fieldVisibility={fieldVisibility}
+              setFieldVisibility={setFieldVisibility}
+              inputType={HiddenInputType.SMTP_PASSWORD}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">From Email:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SENDER_EMAIL}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default EmailConfigurations;

dashboard/src/components/EnvComponents/Features.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Flex, Stack, Text } from '@chakra-ui/react';
+import InputField from '../InputField';
+import { SwitchInputType } from '../../constants';
+
+const Features = ({ variables, setVariables }: any) => {
+	return (
+		<div>
+			{' '}
+			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+				Disable Features
+			</Text>
+			<Stack spacing={6} padding="2% 0%">
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Login Page:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Email Verification:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Magic Login Link:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Basic Authentication:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Sign Up:</Text>
+					</Flex>
+					<Flex justifyContent="start" mb={3}>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_SIGN_UP}
+						/>
+					</Flex>
+				</Flex>
+			</Stack>
+		</div>
+	);
+};
+
+export default Features;

dashboard/src/components/EnvComponents/JWTConfiguration.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import {
+  HiddenInputType,
+  TextInputType,
+  TextAreaInputType,
+} from "../../constants";
+import GenerateKeysModal from "../GenerateKeysModal";
+import InputField from "../InputField";
+
+const JSTConfigurations = ({
+  variables,
+  setVariables,
+  fieldVisibility,
+  setFieldVisibility,
+  SelectInputType,
+  getData,
+  HMACEncryptionType,
+  RSAEncryptionType,
+  ECDSAEncryptionType,
+}: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+
+  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>
+  );
+};
+
+export default JSTConfigurations;

dashboard/src/components/EnvComponents/OAuthConfig.tsx

@@ -0,0 +1,273 @@
+import React from 'react';
+import InputField from '../InputField';
+import {
+	Flex,
+	Stack,
+	Center,
+	Text,
+	Box,
+	Divider,
+	useMediaQuery,
+} from '@chakra-ui/react';
+import {
+	FaGoogle,
+	FaGithub,
+	FaFacebookF,
+	FaLinkedin,
+	FaApple,
+} from 'react-icons/fa';
+import { TextInputType, HiddenInputType } from '../../constants';
+
+const OAuthConfig = ({
+	envVariables,
+	setVariables,
+	fieldVisibility,
+	setFieldVisibility,
+}: any) => {
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:667px)');
+	return (
+		<div>
+			<Box>
+				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={6}>
+					Authorizer Config
+				</Text>
+				<Stack spacing={6} padding="2% 0%">
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Flex w="30%" justifyContent="start" alignItems="center">
+							<Text fontSize="sm">Client ID</Text>
+						</Flex>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								variables={envVariables}
+								setVariables={() => {}}
+								inputType={TextInputType.CLIENT_ID}
+								placeholder="Client ID"
+								readOnly={true}
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Flex w="30%" justifyContent="start" alignItems="center">
+							<Text fontSize="sm">Client Secret</Text>
+						</Flex>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.CLIENT_SECRET}
+								placeholder="Client Secret"
+								readOnly={true}
+							/>
+						</Center>
+					</Flex>
+				</Stack>
+				<Divider mt={5} mb={2} color="blackAlpha.700" />
+				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={4}>
+					Social Media Logins
+				</Text>
+				<Stack spacing={6} padding="2% 0%">
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #ff3e30"
+							borderRadius="5px"
+						>
+							<FaGoogle style={{ color: '#ff3e30' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.GOOGLE_CLIENT_ID}
+								placeholder="Google 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.GOOGLE_CLIENT_SECRET}
+								placeholder="Google Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #171515"
+							borderRadius="5px"
+						>
+							<FaGithub style={{ color: '#171515' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.GITHUB_CLIENT_ID}
+								placeholder="Github 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.GITHUB_CLIENT_SECRET}
+								placeholder="Github Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaFacebookF style={{ color: '#3b5998' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.FACEBOOK_CLIENT_ID}
+								placeholder="Facebook 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.FACEBOOK_CLIENT_SECRET}
+								placeholder="Facebook Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaLinkedin style={{ color: '#3b5998' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.LINKEDIN_CLIENT_ID}
+								placeholder="LinkedIn 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.LINKEDIN_CLIENT_SECRET}
+								placeholder="LinkedIn Client Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaApple style={{ color: '#3b5998' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.APPLE_CLIENT_ID}
+								placeholder="Apple 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.APPLE_CLIENT_SECRET}
+								placeholder="Apple CLient Secret"
+							/>
+						</Center>
+					</Flex>
+				</Stack>
+			</Box>
+		</div>
+	);
+};
+
+export default OAuthConfig;

dashboard/src/components/EnvComponents/OrganizationInfo.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../InputField";
+import { TextInputType } from "../../constants";
+
+const OrganizationInfo = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Organization Information
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Organization Name:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.ORGANIZATION_NAME}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Organization Logo:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.ORGANIZATION_LOGO}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default OrganizationInfo;

dashboard/src/components/EnvComponents/Roles.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
+import { ArrayInputType } from '../../constants';
+import InputField from '../InputField';
+
+const Roles = ({ variables, setVariables }: any) => {
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+
+	return (
+		<div>
+			{' '}
+			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+				Roles
+			</Text>
+			<Stack spacing={6} padding="2% 0%">
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Roles:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+						overflow="hidden"
+					>
+						<InputField
+							borderRadius={7}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={ArrayInputType.ROLES}
+						/>
+					</Center>
+				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Default Roles:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+					>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={ArrayInputType.DEFAULT_ROLES}
+						/>
+					</Center>
+				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Protected Roles:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+					>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={ArrayInputType.PROTECTED_ROLES}
+						/>
+					</Center>
+				</Flex>
+			</Stack>
+		</div>
+	);
+};
+
+export default Roles;

dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import {
+  Flex,
+  Stack,
+  Center,
+  Text,
+  Input,
+  InputGroup,
+  InputRightElement,
+  useMediaQuery,
+} from "@chakra-ui/react";
+import { FaRegEyeSlash, FaRegEye } from "react-icons/fa";
+import InputField from "../InputField";
+import { HiddenInputType } from "../../constants";
+const SecurityAdminSecret = ({
+  variables,
+  setVariables,
+  fieldVisibility,
+  setFieldVisibility,
+  validateAdminSecretHandler,
+  adminSecret,
+}: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold">
+        Security (Admin Secret)
+      </Text>
+      <Stack
+        spacing={6}
+        padding="0 5%"
+        marginTop="3%"
+        border="1px solid #ff7875"
+        borderRadius="5px"
+      >
+        <Flex
+          marginTop={isNotSmallerScreen ? "3%" : "5%"}
+          direction={isNotSmallerScreen ? "row" : "column"}
+        >
+          <Flex
+            mt={3}
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Old Admin Secret:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputGroup size="sm">
+              <Input
+                borderRadius={5}
+                size="sm"
+                placeholder="Enter Old Admin Secret"
+                value={adminSecret.value as string}
+                onChange={(event: any) => validateAdminSecretHandler(event)}
+                type={
+                  !fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET]
+                    ? "password"
+                    : "text"
+                }
+              />
+              <InputRightElement
+                right="5px"
+                children={
+                  <Flex>
+                    {fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET] ? (
+                      <Center
+                        w="25px"
+                        margin="0 1.5%"
+                        cursor="pointer"
+                        onClick={() =>
+                          setFieldVisibility({
+                            ...fieldVisibility,
+                            [HiddenInputType.OLD_ADMIN_SECRET]: false,
+                          })
+                        }
+                      >
+                        <FaRegEyeSlash color="#bfbfbf" />
+                      </Center>
+                    ) : (
+                      <Center
+                        w="25px"
+                        margin="0 1.5%"
+                        cursor="pointer"
+                        onClick={() =>
+                          setFieldVisibility({
+                            ...fieldVisibility,
+                            [HiddenInputType.OLD_ADMIN_SECRET]: true,
+                          })
+                        }
+                      >
+                        <FaRegEye color="#bfbfbf" />
+                      </Center>
+                    )}
+                  </Flex>
+                }
+              />
+            </InputGroup>
+          </Center>
+        </Flex>
+        <Flex
+          paddingBottom="3%"
+          direction={isNotSmallerScreen ? "row" : "column"}
+        >
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "50%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">New Admin Secret:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              mb={3}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={HiddenInputType.ADMIN_SECRET}
+              fieldVisibility={fieldVisibility}
+              setFieldVisibility={setFieldVisibility}
+              isDisabled={adminSecret.disableInputField}
+              placeholder="Enter New Admin Secret"
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default SecurityAdminSecret;

dashboard/src/components/EnvComponents/SessionStorage.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
+import InputField from '../InputField';
+
+const SessionStorage = ({ variables, setVariables, RedisURL }: any) => {
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+	return (
+		<div>
+			{' '}
+			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+				Session Storage
+			</Text>
+			<Text fontStyle="italic" fontSize="sm" color="blackAlpha.500" mt={3}>
+				Note: Redis related environment variables cannot be updated from
+				dashboard. Please use .env file or OS environment variables to update
+				it.
+			</Text>
+			<Stack spacing={6} padding="2% 0%">
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Redis URL:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '3'}
+					>
+						<InputField
+							disabled
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={RedisURL}
+							placeholder="Redis URL"
+						/>
+					</Center>
+				</Flex>
+			</Stack>
+		</div>
+	);
+};
+
+export default SessionStorage;

dashboard/src/components/GenerateKeysModal.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	useDisclosure,
+	Text,
+	useToast,
+	Input,
+	Spinner,
+} from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaSave } from 'react-icons/fa';
+import {
+	ECDSAEncryptionType,
+	HMACEncryptionType,
+	RSAEncryptionType,
+	SelectInputType,
+	TextAreaInputType,
+} from '../constants';
+import InputField from './InputField';
+import { GenerateKeys, UpdateEnvVariables } from '../graphql/mutation';
+
+interface propTypes {
+	jwtType: string;
+	getData: Function;
+}
+
+interface stateVarTypes {
+	JWT_TYPE: string;
+	JWT_SECRET: string;
+	JWT_PRIVATE_KEY: string;
+	JWT_PUBLIC_KEY: string;
+}
+
+const initState: stateVarTypes = {
+	JWT_TYPE: '',
+	JWT_SECRET: '',
+	JWT_PRIVATE_KEY: '',
+	JWT_PUBLIC_KEY: '',
+};
+
+const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [stateVariables, setStateVariables] = React.useState<stateVarTypes>({
+		...initState,
+	});
+	const [isLoading, setIsLoading] = React.useState(false);
+
+	React.useEffect(() => {
+		if (isOpen) {
+			setStateVariables({ ...initState, JWT_TYPE: jwtType });
+		}
+	}, [isOpen]);
+
+	const fetchKeys = async () => {
+		setIsLoading(true);
+		try {
+			const res = await client
+				.mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
+				.toPromise();
+			if (res?.error) {
+				toast({
+					title: 'Error occurred generating jwt keys',
+					isClosable: true,
+					status: 'error',
+					position: 'bottom-right',
+				});
+				closeHandler();
+			} else {
+				setStateVariables({
+					...stateVariables,
+					JWT_SECRET: res?.data?._generate_jwt_keys?.secret || '',
+					JWT_PRIVATE_KEY: res?.data?._generate_jwt_keys?.private_key || '',
+					JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '',
+				});
+			}
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	React.useEffect(() => {
+		if (isOpen && stateVariables.JWT_TYPE) {
+			fetchKeys();
+		}
+	}, [stateVariables.JWT_TYPE]);
+
+	const saveHandler = async () => {
+		const res = await client
+			.mutation(UpdateEnvVariables, { params: { ...stateVariables } })
+			.toPromise();
+
+		if (res.error) {
+			toast({
+				title: 'Error occurred setting jwt keys',
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+
+			return;
+		}
+		toast({
+			title: 'JWT keys updated successfully',
+			isClosable: true,
+			status: 'success',
+			position: 'bottom-right',
+		});
+		closeHandler();
+	};
+
+	const closeHandler = () => {
+		setStateVariables({ ...initState });
+		getData();
+		onClose();
+	};
+
+	return (
+		<>
+			<Button
+				colorScheme="blue"
+				h="1.75rem"
+				size="sm"
+				variant="ghost"
+				onClick={onOpen}
+			>
+				Generate new keys
+			</Button>
+			<Modal isOpen={isOpen} onClose={closeHandler}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>New JWT keys</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Flex>
+							<Flex w="30%" justifyContent="start" alignItems="center">
+								<Text fontSize="sm">JWT Type:</Text>
+							</Flex>
+							<InputField
+								variables={stateVariables}
+								setVariables={setStateVariables}
+								inputType={SelectInputType.JWT_TYPE}
+								value={SelectInputType.JWT_TYPE}
+								options={{
+									...HMACEncryptionType,
+									...RSAEncryptionType,
+									...ECDSAEncryptionType,
+								}}
+							/>
+						</Flex>
+						{isLoading ? (
+							<Center minH="25vh">
+								<Spinner />
+							</Center>
+						) : (
+							<>
+								{Object.values(HMACEncryptionType).includes(
+									stateVariables.JWT_TYPE
+								) ? (
+									<Flex marginTop="8">
+										<Flex w="23%" justifyContent="start" alignItems="center">
+											<Text fontSize="sm">JWT Secret</Text>
+										</Flex>
+										<Center w="77%">
+											<Input
+												size="sm"
+												value={stateVariables.JWT_SECRET}
+												onChange={(event: any) =>
+													setStateVariables({
+														...stateVariables,
+														JWT_SECRET: event.target.value,
+													})
+												}
+												readOnly
+											/>
+										</Center>
+									</Flex>
+								) : (
+									<>
+										<Flex marginTop="8">
+											<Flex w="23%" justifyContent="start" alignItems="center">
+												<Text fontSize="sm">Public Key</Text>
+											</Flex>
+											<Center w="77%">
+												<InputField
+													variables={stateVariables}
+													setVariables={setStateVariables}
+													inputType={TextAreaInputType.JWT_PUBLIC_KEY}
+													placeholder="Add public key here"
+													minH="25vh"
+													readOnly
+												/>
+											</Center>
+										</Flex>
+										<Flex marginTop="8">
+											<Flex w="23%" justifyContent="start" alignItems="center">
+												<Text fontSize="sm">Private Key</Text>
+											</Flex>
+											<Center w="77%">
+												<InputField
+													variables={stateVariables}
+													setVariables={setStateVariables}
+													inputType={TextAreaInputType.JWT_PRIVATE_KEY}
+													placeholder="Add private key here"
+													minH="25vh"
+													readOnly
+												/>
+											</Center>
+										</Flex>
+									</>
+								)}
+							</>
+						)}
+					</ModalBody>
+
+					<ModalFooter>
+						<Button
+							leftIcon={<FaSave />}
+							colorScheme="blue"
+							variant="solid"
+							onClick={saveHandler}
+							isDisabled={isLoading}
+						>
+							<Center h="100%" pt="5%">
+								Apply
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default GenerateKeysModal;

dashboard/src/components/InputField.tsx

@@ -0,0 +1,341 @@
+import React from 'react';
+import {
+	Box,
+	Flex,
+	Input,
+	Center,
+	InputGroup,
+	InputRightElement,
+	Tag,
+	TagLabel,
+	TagRightIcon,
+	Select,
+	Textarea,
+	Switch,
+	Code,
+	Text,
+} from '@chakra-ui/react';
+import {
+	FaRegClone,
+	FaRegEye,
+	FaRegEyeSlash,
+	FaPlus,
+	FaTimes,
+} from 'react-icons/fa';
+import {
+	ArrayInputOperations,
+	ArrayInputType,
+	SelectInputType,
+	HiddenInputType,
+	TextInputType,
+	TextAreaInputType,
+	SwitchInputType,
+	DateInputType,
+} from '../constants';
+import { copyTextToClipboard } from '../utils';
+
+const InputField = ({
+	inputType,
+	variables,
+	setVariables,
+	fieldVisibility,
+	setFieldVisibility,
+	...downshiftProps
+}: any) => {
+	const props = {
+		size: 'sm',
+		...downshiftProps,
+	};
+	const [inputFieldVisibility, setInputFieldVisibility] = React.useState<
+		Record<string, boolean>
+	>({
+		ROLES: false,
+		DEFAULT_ROLES: false,
+		PROTECTED_ROLES: false,
+		ALLOWED_ORIGINS: false,
+		roles: false,
+	});
+	const [inputData, setInputData] = React.useState<Record<string, string>>({
+		ROLES: '',
+		DEFAULT_ROLES: '',
+		PROTECTED_ROLES: '',
+		ALLOWED_ORIGINS: '',
+		roles: '',
+	});
+	const updateInputHandler = (
+		type: string,
+		operation: any,
+		role: string = ''
+	) => {
+		if (operation === ArrayInputOperations.APPEND) {
+			if (inputData[type] !== '') {
+				setVariables({
+					...variables,
+					[type]: [...variables[type], inputData[type]],
+				});
+				setInputData({ ...inputData, [type]: '' });
+			}
+			setInputFieldVisibility({ ...inputFieldVisibility, [type]: false });
+		}
+		if (operation === ArrayInputOperations.REMOVE) {
+			let updatedEnvVars = variables[type].filter(
+				(item: string) => item !== role
+			);
+			setVariables({
+				...variables,
+				[type]: updatedEnvVars,
+			});
+		}
+	};
+	if (Object.values(TextInputType).includes(inputType)) {
+		return (
+			<InputGroup size="sm">
+				<Input
+					{...props}
+					value={variables[inputType] ? variables[inputType] : ''}
+					onChange={(
+						event: Event & {
+							target: HTMLInputElement;
+						}
+					) =>
+						setVariables({
+							...variables,
+							[inputType]: event.target.value,
+						})
+					}
+				/>
+				<InputRightElement
+					children={<FaRegClone color="#bfbfbf" />}
+					cursor="pointer"
+					onClick={() => copyTextToClipboard(variables[inputType])}
+				/>
+			</InputGroup>
+		);
+	}
+	if (Object.values(HiddenInputType).includes(inputType)) {
+		return (
+			<InputGroup size="sm">
+				<Input
+					{...props}
+					value={variables[inputType] ?? ''}
+					onChange={(
+						event: Event & {
+							target: HTMLInputElement;
+						}
+					) =>
+						setVariables({
+							...variables,
+							[inputType]: event.target.value,
+						})
+					}
+					type={!fieldVisibility[inputType] ? 'password' : 'text'}
+				/>
+				<InputRightElement
+					right="15px"
+					children={
+						<Flex>
+							{fieldVisibility[inputType] ? (
+								<Center
+									w="25px"
+									margin="0 1.5%"
+									cursor="pointer"
+									onClick={() =>
+										setFieldVisibility({
+											...fieldVisibility,
+											[inputType]: false,
+										})
+									}
+								>
+									<FaRegEyeSlash color="#bfbfbf" />
+								</Center>
+							) : (
+								<Center
+									w="25px"
+									margin="0 1.5%"
+									cursor="pointer"
+									onClick={() =>
+										setFieldVisibility({
+											...fieldVisibility,
+											[inputType]: true,
+										})
+									}
+								>
+									<FaRegEye color="#bfbfbf" />
+								</Center>
+							)}
+							<Center
+								w="25px"
+								margin="0 1.5%"
+								cursor="pointer"
+								onClick={() => copyTextToClipboard(variables[inputType])}
+							>
+								<FaRegClone color="#bfbfbf" />
+							</Center>
+						</Flex>
+					}
+				/>
+			</InputGroup>
+		);
+	}
+	if (Object.values(ArrayInputType).includes(inputType)) {
+		return (
+			<Flex
+				border="1px solid #e2e8f0"
+				w="100%"
+				borderRadius={5}
+				paddingTop="0.5%"
+				overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
+				overflowY="hidden"
+				justifyContent="start"
+				alignItems="center"
+			>
+				{variables[inputType].map((role: string, index: number) => (
+					<Box key={index} margin="0.5%" role="group">
+						<Tag
+							size="sm"
+							variant="outline"
+							colorScheme="gray"
+							minW="fit-content"
+						>
+							<TagLabel cursor="default">{role}</TagLabel>
+							<TagRightIcon
+								boxSize="12px"
+								as={FaTimes}
+								display="none"
+								cursor="pointer"
+								_groupHover={{ display: 'block' }}
+								onClick={() =>
+									updateInputHandler(
+										inputType,
+										ArrayInputOperations.REMOVE,
+										role
+									)
+								}
+							/>
+						</Tag>
+					</Box>
+				))}
+				{inputFieldVisibility[inputType] ? (
+					<Box ml="1%" mb="0.75%">
+						<Input
+							type="text"
+							size="xs"
+							minW="150px"
+							placeholder="add a new value"
+							value={inputData[inputType] ?? ''}
+							onChange={(e: any) => {
+								setInputData({ ...inputData, [inputType]: e.target.value });
+							}}
+							onBlur={() =>
+								updateInputHandler(inputType, ArrayInputOperations.APPEND)
+							}
+							onKeyPress={(event) => {
+								if (event.key === 'Enter') {
+									updateInputHandler(inputType, ArrayInputOperations.APPEND);
+								}
+							}}
+						/>
+					</Box>
+				) : (
+					<Box
+						marginLeft="0.5%"
+						cursor="pointer"
+						onClick={() =>
+							setInputFieldVisibility({
+								...inputFieldVisibility,
+								[inputType]: true,
+							})
+						}
+					>
+						<Tag
+							size="sm"
+							variant="outline"
+							colorScheme="gray"
+							minW="fit-content"
+						>
+							<FaPlus />
+						</Tag>
+					</Box>
+				)}
+			</Flex>
+		);
+	}
+	if (Object.values(SelectInputType).includes(inputType)) {
+		const { options, ...rest } = props;
+		return (
+			<Select
+				size="sm"
+				{...rest}
+				value={variables[inputType] ? variables[inputType] : ''}
+				onChange={(e) =>
+					setVariables({ ...variables, [inputType]: e.target.value })
+				}
+			>
+				{Object.entries(options).map(([key, value]: any) => (
+					<option value={value} key={key}>
+						{key}
+					</option>
+				))}
+			</Select>
+		);
+	}
+	if (Object.values(TextAreaInputType).includes(inputType)) {
+		return (
+			<Textarea
+				{...props}
+				size="lg"
+				fontSize={14}
+				value={variables[inputType] ? variables[inputType] : ''}
+				onChange={(
+					event: Event & {
+						target: HTMLInputElement;
+					}
+				) =>
+					setVariables({
+						...variables,
+						[inputType]: event.target.value,
+					})
+				}
+			/>
+		);
+	}
+	if (Object.values(SwitchInputType).includes(inputType)) {
+		return (
+			<Flex w="25%" justifyContent="space-between">
+				<Text h="75%" fontWeight="bold" marginRight="2">
+					Off
+				</Text>
+				<Switch
+					size="md"
+					isChecked={variables[inputType]}
+					onChange={() => {
+						setVariables({
+							...variables,
+							[inputType]: !variables[inputType],
+						});
+					}}
+				/>
+				<Text h="75%" fontWeight="bold" marginLeft="2">
+					On
+				</Text>
+			</Flex>
+		);
+	}
+	if (Object.values(DateInputType).includes(inputType)) {
+		return (
+			<Flex border="1px solid #e2e8f0" w="100%" h="33px" padding="1%">
+				<input
+					type="date"
+					style={{ width: '100%', paddingLeft: '2.5%' }}
+					value={variables[inputType] ? variables[inputType] : ''}
+					onChange={(e) =>
+						setVariables({ ...variables, [inputType]: e.target.value })
+					}
+				/>
+			</Flex>
+		);
+	}
+	return null;
+};
+
+export default InputField;

dashboard/src/components/InviteMembersModal.tsx

@@ -0,0 +1,385 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	useDisclosure,
+	useToast,
+	Tabs,
+	TabList,
+	Tab,
+	TabPanels,
+	TabPanel,
+	InputGroup,
+	Input,
+	InputRightElement,
+	Text,
+	Link,
+	Tooltip,
+} from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa';
+import { useDropzone } from 'react-dropzone';
+import { validateEmail, validateURI } from '../utils';
+import { InviteMembers } from '../graphql/mutation';
+import { ArrayInputOperations } from '../constants';
+import parseCSV from '../utils/parseCSV';
+
+interface stateDataTypes {
+	value: string;
+	isInvalid: boolean;
+}
+
+interface requestParamTypes {
+	emails: string[];
+	redirect_uri?: string;
+}
+
+const initData: stateDataTypes = {
+	value: '',
+	isInvalid: false,
+};
+
+const InviteMembersModal = ({
+	updateUserList,
+	disabled = true,
+}: {
+	updateUserList: Function;
+	disabled: boolean;
+}) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [tabIndex, setTabIndex] = useState<number>(0);
+	const [redirectURI, setRedirectURI] = useState<stateDataTypes>({
+		...initData,
+	});
+	const [emails, setEmails] = useState<stateDataTypes[]>([{ ...initData }]);
+	const [disableSendButton, setDisableSendButton] = useState<boolean>(false);
+	const [loading, setLoading] = React.useState<boolean>(false);
+	useEffect(() => {
+		if (redirectURI.isInvalid) {
+			setDisableSendButton(true);
+		} else if (emails.some((emailData) => emailData.isInvalid)) {
+			setDisableSendButton(true);
+		} else {
+			setDisableSendButton(false);
+		}
+	}, [redirectURI, emails]);
+	useEffect(() => {
+		return () => {
+			setRedirectURI({ ...initData });
+			setEmails([{ ...initData }]);
+		};
+	}, []);
+	const sendInviteHandler = async () => {
+		setLoading(true);
+		try {
+			const emailList = emails
+				.filter((emailData) => !emailData.isInvalid)
+				.map((emailData) => emailData.value);
+			const params: requestParamTypes = {
+				emails: emailList,
+			};
+			if (redirectURI.value !== '' && !redirectURI.isInvalid) {
+				params.redirect_uri = redirectURI.value;
+			}
+			if (emailList.length > 0) {
+				const res = await client
+					.mutation(InviteMembers, {
+						params,
+					})
+					.toPromise();
+				if (res.error) {
+					throw new Error('Internal server error');
+					return;
+				}
+				toast({
+					title: 'Invites sent successfully!',
+					isClosable: true,
+					status: 'success',
+					position: 'bottom-right',
+				});
+				setLoading(false);
+				updateUserList();
+			} else {
+				throw new Error('Please add emails');
+			}
+		} catch (error: any) {
+			toast({
+				title: error?.message || 'Error occurred, try again!',
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+			setLoading(false);
+		}
+		closeModalHandler();
+	};
+	const updateEmailListHandler = (operation: string, index: number = 0) => {
+		switch (operation) {
+			case ArrayInputOperations.APPEND:
+				setEmails([...emails, { ...initData }]);
+				break;
+			case ArrayInputOperations.REMOVE:
+				const updatedEmailList = [...emails];
+				updatedEmailList.splice(index, 1);
+				setEmails(updatedEmailList);
+				break;
+			default:
+				break;
+		}
+	};
+	const inputChangeHandler = (value: string, index: number) => {
+		const updatedEmailList = [...emails];
+		updatedEmailList[index].value = value;
+		updatedEmailList[index].isInvalid = !validateEmail(value);
+		setEmails(updatedEmailList);
+	};
+	const changeTabsHandler = (index: number) => {
+		setTabIndex(index);
+	};
+	const onDrop = useCallback(async (acceptedFiles) => {
+		const result = await parseCSV(acceptedFiles[0], ',');
+		setEmails(result);
+		changeTabsHandler(0);
+	}, []);
+	const setRedirectURIHandler = (value: string) => {
+		const updatedRedirectURI: stateDataTypes = {
+			value: '',
+			isInvalid: false,
+		};
+		updatedRedirectURI.value = value;
+		updatedRedirectURI.isInvalid = !validateURI(value);
+		setRedirectURI(updatedRedirectURI);
+	};
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		accept: 'text/csv',
+	});
+	const closeModalHandler = () => {
+		setRedirectURI({
+			value: '',
+			isInvalid: false,
+		});
+		setEmails([
+			{
+				value: '',
+				isInvalid: false,
+			},
+		]);
+		onClose();
+	};
+	return (
+		<>
+			<Button
+				leftIcon={<FaUserPlus />}
+				colorScheme="blue"
+				variant="solid"
+				onClick={onOpen}
+				isDisabled={disabled}
+				size="sm"
+			>
+				<Center h="100%">
+					{disabled ? (
+						<Tooltip
+							mr={8}
+							mt={1}
+							hasArrow
+							bg="gray.300"
+							color="black"
+							label="Email verification is disabled, refer to 'Features' tab within 'Environment' to enable it."
+						>
+							Invite Members
+						</Tooltip>
+					) : (
+						'Invite Members'
+					)}
+				</Center>{' '}
+			</Button>
+			<Modal isOpen={isOpen} onClose={closeModalHandler} size="xl">
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Invite Members</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Tabs
+							isFitted
+							variant="enclosed"
+							index={tabIndex}
+							onChange={changeTabsHandler}
+						>
+							<TabList>
+								<Tab>Enter emails</Tab>
+								<Tab>Upload CSV</Tab>
+							</TabList>
+							<TabPanels
+								border="1px"
+								borderTop="0"
+								borderBottomRadius="5px"
+								borderColor="inherit"
+							>
+								<TabPanel>
+									<Flex flexDirection="column">
+										<Flex
+											width="100%"
+											justifyContent="start"
+											alignItems="center"
+											marginBottom="2%"
+										>
+											<Flex marginLeft="2.5%">Redirect URI</Flex>
+										</Flex>
+										<Flex
+											width="100%"
+											justifyContent="space-between"
+											alignItems="center"
+											marginBottom="2%"
+										>
+											<InputGroup size="md" marginBottom="2.5%">
+												<Input
+													pr="4.5rem"
+													type="text"
+													placeholder="https://domain.com/sign-up"
+													value={redirectURI.value}
+													isInvalid={redirectURI.isInvalid}
+													onChange={(e) =>
+														setRedirectURIHandler(e.currentTarget.value)
+													}
+												/>
+											</InputGroup>
+										</Flex>
+										<Flex
+											width="100%"
+											justifyContent="space-between"
+											alignItems="center"
+											marginBottom="2%"
+										>
+											<Flex marginLeft="2.5%">Emails</Flex>
+											<Flex>
+												<Button
+													leftIcon={<FaPlus />}
+													colorScheme="blue"
+													h="1.75rem"
+													size="sm"
+													variant="ghost"
+													onClick={() =>
+														updateEmailListHandler(ArrayInputOperations.APPEND)
+													}
+												>
+													Add more emails
+												</Button>
+											</Flex>
+										</Flex>
+										<Flex flexDirection="column" maxH={250} overflowY="scroll">
+											{emails.map((emailData, index) => (
+												<Flex
+													key={`email-data-${index}`}
+													justifyContent="center"
+													alignItems="center"
+												>
+													<InputGroup size="md" marginBottom="2.5%">
+														<Input
+															pr="4.5rem"
+															type="text"
+															placeholder="name@domain.com"
+															value={emailData.value}
+															isInvalid={emailData.isInvalid}
+															onChange={(e) =>
+																inputChangeHandler(e.currentTarget.value, index)
+															}
+														/>
+														<InputRightElement width="3rem">
+															<Button
+																h="1.75rem"
+																size="sm"
+																colorScheme="blackAlpha"
+																variant="ghost"
+																onClick={() =>
+																	updateEmailListHandler(
+																		ArrayInputOperations.REMOVE,
+																		index
+																	)
+																}
+															>
+																<FaMinusCircle />
+															</Button>
+														</InputRightElement>
+													</InputGroup>
+												</Flex>
+											))}
+										</Flex>
+									</Flex>
+								</TabPanel>
+								<TabPanel>
+									<Flex
+										justify="center"
+										align="center"
+										textAlign="center"
+										bg="#f0f0f0"
+										h={230}
+										p={50}
+										m={2}
+										borderRadius={5}
+										{...getRootProps()}
+									>
+										<input {...getInputProps()} />
+										{isDragActive ? (
+											<Text>Drop the files here...</Text>
+										) : (
+											<Flex
+												flexDirection="column"
+												justifyContent="center"
+												alignItems="center"
+											>
+												<Center boxSize="20" color="blackAlpha.500">
+													<FaUpload fontSize="40" />
+												</Center>
+												<Text>
+													Drag 'n' drop the csv file here, or click to select.
+												</Text>
+												<Text size="xs">
+													Download{' '}
+													<Link
+														href={`/dashboard/public/sample.csv`}
+														download="sample.csv"
+														color="blue.600"
+														onClick={(e) => e.stopPropagation()}
+													>
+														{' '}
+														sample.csv
+													</Link>{' '}
+													and modify it.{' '}
+												</Text>
+											</Flex>
+										)}
+									</Flex>
+								</TabPanel>
+							</TabPanels>
+						</Tabs>
+					</ModalBody>
+					<ModalFooter>
+						<Button
+							colorScheme="blue"
+							variant="solid"
+							onClick={sendInviteHandler}
+							isDisabled={disableSendButton || loading}
+						>
+							<Center h="100%" pt="5%">
+								Send
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default InviteMembersModal;

dashboard/src/components/Menu.tsx

@@ -0,0 +1,364 @@
+import React, { Fragment, ReactNode } from 'react';
+import {
+	IconButton,
+	Box,
+	CloseButton,
+	Flex,
+	Image,
+	HStack,
+	VStack,
+	Icon,
+	useColorModeValue,
+	Link,
+	Text,
+	BoxProps,
+	FlexProps,
+	Menu,
+	MenuButton,
+	MenuItem,
+	MenuList,
+	Accordion,
+	AccordionButton,
+	AccordionPanel,
+	AccordionItem,
+	useMediaQuery,
+} from '@chakra-ui/react';
+import {
+	FiUser,
+	FiCode,
+	FiSettings,
+	FiMenu,
+	FiUsers,
+	FiChevronDown,
+} from 'react-icons/fi';
+import { BiCustomize } from 'react-icons/bi';
+import { AiOutlineKey } from 'react-icons/ai';
+import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
+import { MdSecurity } from 'react-icons/md';
+import { RiDatabase2Line } from 'react-icons/ri';
+import { BsCheck2Circle } from 'react-icons/bs';
+import { HiOutlineMail, HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { IconType } from 'react-icons';
+import { ReactText } from 'react';
+import { useMutation, useQuery } from 'urql';
+import { NavLink, useNavigate, useLocation } from 'react-router-dom';
+import { useAuthContext } from '../contexts/AuthContext';
+import { AdminLogout } from '../graphql/mutation';
+import { MetaQuery } from '../graphql/queries';
+
+interface SubRoutes {
+	name: string;
+	icon: IconType;
+	route: string;
+}
+
+interface LinkItemProps {
+	name: string;
+	icon: IconType;
+	route: string;
+	subRoutes?: SubRoutes[];
+}
+const LinkItems: Array<LinkItemProps> = [
+	{
+		name: 'Environment ',
+		icon: FiSettings,
+		route: '/',
+		subRoutes: [
+			{
+				name: 'OAuth Config',
+				icon: AiOutlineKey,
+				route: '/oauth-setting',
+			},
+
+			{ name: 'Roles', icon: FiUser, route: '/roles' },
+			{
+				name: 'JWT Secrets',
+				icon: SiJsonwebtokens,
+				route: '/jwt-config',
+			},
+			{
+				name: 'Session Storage',
+				icon: RiDatabase2Line,
+				route: '/session-storage',
+			},
+			{
+				name: 'Email Configurations',
+				icon: HiOutlineMail,
+				route: '/email-config',
+			},
+			{
+				name: 'Domain White Listing',
+				icon: BsCheck2Circle,
+				route: '/whitelist-variables',
+			},
+			{
+				name: 'Organization Info',
+				icon: HiOutlineOfficeBuilding,
+				route: '/organization-info',
+			},
+			{ name: 'Access Token', icon: SiOpenaccess, route: '/access-token' },
+			{
+				name: 'Features',
+				icon: BiCustomize,
+				route: '/features',
+			},
+			{ name: 'Database', icon: RiDatabase2Line, route: '/db-cred' },
+			{
+				name: ' Security',
+				icon: MdSecurity,
+				route: '/admin-secret',
+			},
+		],
+	},
+	{ name: 'Users', icon: FiUsers, route: '/users' },
+];
+
+interface SidebarProps extends BoxProps {
+	onClose: () => void;
+}
+
+export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
+	const { pathname } = useLocation();
+	const [{ data }] = useQuery({ query: MetaQuery });
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+	return (
+		<Box
+			transition="3s ease"
+			bg={useColorModeValue('white', 'gray.900')}
+			borderRight="1px"
+			borderRightColor={useColorModeValue('gray.200', 'gray.700')}
+			w={{ base: 'full', md: '64' }}
+			pos="fixed"
+			h="full"
+			{...rest}
+		>
+			<Flex
+				h="20"
+				alignItems="center"
+				mx="18"
+				justifyContent="space-between"
+				flexDirection="row"
+			>
+				<NavLink to="/">
+					<Flex alignItems="center" mt="6">
+						<Image
+							src="https://authorizer.dev/images/logo.png"
+							alt="logo"
+							height="36px"
+						/>
+						<Text fontSize="large" ml="2" letterSpacing="3">
+							AUTHORIZER
+						</Text>
+					</Flex>
+				</NavLink>
+				<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
+			</Flex>
+
+			<Accordion defaultIndex={[0]} allowMultiple>
+				<AccordionItem textAlign="center" border="none" w="100%">
+					{LinkItems.map((link) =>
+						link?.subRoutes ? (
+							<div key={link.name}>
+								<AccordionButton _focus={{ boxShadow: 'none' }}>
+									<Text as="div" fontSize="md">
+										<NavItem
+											icon={link.icon}
+											color={pathname === link.route ? 'blue.500' : ''}
+											style={{ outline: 'unset' }}
+											height={12}
+											ml={-1}
+											mb={isNotSmallerScreen ? -1 : -4}
+											w={isNotSmallerScreen ? '100%' : '310%'}
+										>
+											<Fragment>
+												{link.name}
+												<Box display={{ base: 'none', md: 'flex' }} ml={12}>
+													<FiChevronDown />
+												</Box>
+											</Fragment>
+										</NavItem>
+									</Text>
+								</AccordionButton>
+								<AccordionPanel>
+									{link.subRoutes?.map((sublink) => (
+										<NavLink
+											key={sublink.name}
+											to={sublink.route}
+											onClick={onClose}
+										>
+											{' '}
+											<Text as="div" fontSize="xs" ml={2}>
+												<NavItem
+													icon={sublink.icon}
+													color={pathname === sublink.route ? 'blue.500' : ''}
+													height={8}
+												>
+													{sublink.name}
+												</NavItem>{' '}
+											</Text>
+										</NavLink>
+									))}
+								</AccordionPanel>
+							</div>
+						) : (
+							<NavLink key={link.name} to={link.route}>
+								{' '}
+								<Text as="div" fontSize="md" w="100%" mt={-2}>
+									<NavItem
+										icon={link.icon}
+										color={pathname === link.route ? 'blue.500' : ''}
+										height={12}
+										onClick={onClose}
+									>
+										{link.name}
+									</NavItem>{' '}
+								</Text>
+							</NavLink>
+						)
+					)}
+					<Link
+						href="/playground"
+						target="_blank"
+						style={{
+							textDecoration: 'none',
+						}}
+						_focus={{ _boxShadow: 'none' }}
+					>
+						<NavItem icon={FiCode}>API Playground</NavItem>
+					</Link>
+				</AccordionItem>
+			</Accordion>
+
+			{data?.meta?.version && (
+				<Flex alignContent="center">
+					{' '}
+					<Text
+						color="gray.400"
+						fontSize="sm"
+						textAlign="center"
+						position="absolute"
+						bottom="5"
+						left="7"
+					>
+						Current Version: {data.meta.version}
+					</Text>
+				</Flex>
+			)}
+		</Box>
+	);
+};
+
+interface NavItemProps extends FlexProps {
+	icon: IconType;
+	children: ReactText | JSX.Element | JSX.Element[];
+}
+export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
+	return (
+		<Flex
+			align="center"
+			p="3"
+			mx="3"
+			borderRadius="md"
+			role="group"
+			cursor="pointer"
+			_hover={{
+				bg: 'blue.500',
+				color: 'white',
+			}}
+			{...rest}
+		>
+			{icon && (
+				<Icon
+					mr="4"
+					fontSize="16"
+					_groupHover={{
+						color: 'white',
+					}}
+					as={icon}
+				/>
+			)}
+			{children}
+		</Flex>
+	);
+};
+
+interface MobileProps extends FlexProps {
+	onOpen: () => void;
+}
+export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
+	const [_, logout] = useMutation(AdminLogout);
+	const { setIsLoggedIn } = useAuthContext();
+	const navigate = useNavigate();
+
+	const handleLogout = async () => {
+		await logout();
+		setIsLoggedIn(false);
+		navigate('/', { replace: true });
+	};
+
+	return (
+		<Flex
+			ml={{ base: 0, md: 64 }}
+			px={{ base: 4, md: 4 }}
+			height="20"
+			position="fixed"
+			right="0"
+			left="0"
+			alignItems="center"
+			bg={useColorModeValue('white', 'gray.900')}
+			borderBottomWidth="1px"
+			borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
+			justifyContent={{ base: 'space-between', md: 'flex-end' }}
+			zIndex={99}
+			{...rest}
+		>
+			<IconButton
+				display={{ base: 'flex', md: 'none' }}
+				onClick={onOpen}
+				variant="outline"
+				aria-label="open menu"
+				icon={<FiMenu />}
+			/>
+
+			<Image
+				src="https://authorizer.dev/images/logo.png"
+				alt="logo"
+				height="36px"
+				display={{ base: 'flex', md: 'none' }}
+			/>
+
+			<HStack spacing={{ base: '0', md: '6' }}>
+				<Flex alignItems={'center'}>
+					<Menu>
+						<MenuButton
+							py={2}
+							transition="all 0.3s"
+							_focus={{ boxShadow: 'none' }}
+						>
+							<HStack mr={5}>
+								<FiUser />
+								<VStack
+									display={{ base: 'none', md: 'flex' }}
+									alignItems="flex-start"
+									spacing="1px"
+									ml="2"
+								>
+									<Text fontSize="sm">Admin</Text>
+								</VStack>
+								<Box display={{ base: 'none', md: 'flex' }}>
+									<FiChevronDown />
+								</Box>
+							</HStack>
+						</MenuButton>
+						<MenuList
+							bg={useColorModeValue('white', 'gray.900')}
+							borderColor={useColorModeValue('gray.200', 'gray.700')}
+						>
+							<MenuItem onClick={handleLogout}>Sign out</MenuItem>
+						</MenuList>
+					</Menu>
+				</Flex>
+			</HStack>
+		</Flex>
+	);
+};

dashboard/src/constants.ts

@@ -0,0 +1,153 @@
+export const LOGO_URL =
+	'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png';
+
+export const TextInputType = {
+	ACCESS_TOKEN_EXPIRY_TIME: 'ACCESS_TOKEN_EXPIRY_TIME',
+	CLIENT_ID: 'CLIENT_ID',
+	GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
+	GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
+	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
+	LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
+	APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
+	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
+	REDIS_URL: 'REDIS_URL',
+	SMTP_HOST: 'SMTP_HOST',
+	SMTP_PORT: 'SMTP_PORT',
+	SMTP_USERNAME: 'SMTP_USERNAME',
+	SENDER_EMAIL: 'SENDER_EMAIL',
+	ORGANIZATION_NAME: 'ORGANIZATION_NAME',
+	ORGANIZATION_LOGO: 'ORGANIZATION_LOGO',
+	DATABASE_NAME: 'DATABASE_NAME',
+	DATABASE_TYPE: 'DATABASE_TYPE',
+	DATABASE_URL: 'DATABASE_URL',
+	GIVEN_NAME: 'given_name',
+	MIDDLE_NAME: 'middle_name',
+	FAMILY_NAME: 'family_name',
+	NICKNAME: 'nickname',
+	PHONE_NUMBER: 'phone_number',
+	PICTURE: 'picture',
+};
+
+export const HiddenInputType = {
+	CLIENT_SECRET: 'CLIENT_SECRET',
+	GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
+	GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
+	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
+	LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
+	APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
+	JWT_SECRET: 'JWT_SECRET',
+	SMTP_PASSWORD: 'SMTP_PASSWORD',
+	ADMIN_SECRET: 'ADMIN_SECRET',
+	OLD_ADMIN_SECRET: 'OLD_ADMIN_SECRET',
+};
+
+export const ArrayInputType = {
+	ROLES: 'ROLES',
+	DEFAULT_ROLES: 'DEFAULT_ROLES',
+	PROTECTED_ROLES: 'PROTECTED_ROLES',
+	ALLOWED_ORIGINS: 'ALLOWED_ORIGINS',
+	USER_ROLES: 'roles',
+};
+
+export const SelectInputType = {
+	JWT_TYPE: 'JWT_TYPE',
+	GENDER: 'gender',
+};
+
+export const TextAreaInputType = {
+	CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
+	JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
+	JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY',
+};
+
+export const SwitchInputType = {
+	DISABLE_LOGIN_PAGE: 'DISABLE_LOGIN_PAGE',
+	DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN',
+	DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION',
+	DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION',
+	DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
+	DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
+};
+
+export const DateInputType = {
+	BIRTHDATE: 'birthdate',
+};
+
+export const ArrayInputOperations = {
+	APPEND: 'APPEND',
+	REMOVE: 'REMOVE',
+};
+
+export const HMACEncryptionType = {
+	HS256: 'HS256',
+	HS384: 'HS384',
+	HS512: 'HS512',
+};
+
+export const RSAEncryptionType = {
+	RS256: 'RS256',
+	RS384: 'RS384',
+	RS512: 'RS512',
+};
+
+export const ECDSAEncryptionType = {
+	ES256: 'ES256',
+	ES384: 'ES384',
+	ES512: 'ES512',
+};
+
+export interface envVarTypes {
+	GOOGLE_CLIENT_ID: string;
+	GOOGLE_CLIENT_SECRET: string;
+	GITHUB_CLIENT_ID: string;
+	GITHUB_CLIENT_SECRET: string;
+	FACEBOOK_CLIENT_ID: string;
+	FACEBOOK_CLIENT_SECRET: string;
+	LINKEDIN_CLIENT_ID: string;
+	LINKEDIN_CLIENT_SECRET: string;
+	APPLE_CLIENT_ID: string;
+	APPLE_CLIENT_SECRET: string;
+	ROLES: [string] | [];
+	DEFAULT_ROLES: [string] | [];
+	PROTECTED_ROLES: [string] | [];
+	JWT_TYPE: string;
+	JWT_SECRET: string;
+	JWT_ROLE_CLAIM: string;
+	JWT_PRIVATE_KEY: string;
+	JWT_PUBLIC_KEY: string;
+	REDIS_URL: string;
+	SMTP_HOST: string;
+	SMTP_PORT: string;
+	SMTP_USERNAME: string;
+	SMTP_PASSWORD: string;
+	SENDER_EMAIL: string;
+	ALLOWED_ORIGINS: [string] | [];
+	ORGANIZATION_NAME: string;
+	ORGANIZATION_LOGO: string;
+	CUSTOM_ACCESS_TOKEN_SCRIPT: string;
+	ADMIN_SECRET: string;
+	DISABLE_LOGIN_PAGE: boolean;
+	DISABLE_MAGIC_LINK_LOGIN: boolean;
+	DISABLE_EMAIL_VERIFICATION: boolean;
+	DISABLE_BASIC_AUTHENTICATION: boolean;
+	DISABLE_SIGN_UP: boolean;
+	OLD_ADMIN_SECRET: string;
+	DATABASE_NAME: string;
+	DATABASE_TYPE: string;
+	DATABASE_URL: string;
+	ACCESS_TOKEN_EXPIRY_TIME: string;
+}
+
+export const envSubViews = {
+	INSTANCE_INFO: 'instance-info',
+	ROLES: 'roles',
+	JWT_CONFIG: 'jwt-config',
+	SESSION_STORAGE: 'session-storage',
+	EMAIL_CONFIG: 'email-config',
+	WHITELIST_VARIABLES: 'whitelist-variables',
+	ORGANIZATION_INFO: 'organization-info',
+	ACCESS_TOKEN: 'access-token',
+	FEATURES: 'features',
+	ADMIN_SECRET: 'admin-secret',
+	DB_CRED: 'db-cred',
+};

dashboard/src/contexts/AuthContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { Center, Spinner } from '@chakra-ui/react';
+import { useQuery } from 'urql';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { AdminSessionQuery } from '../graphql/queries';
+import { hasAdminSecret } from '../utils';
+
+const AuthContext = createContext({
+	isLoggedIn: false,
+	setIsLoggedIn: (data: boolean) => {},
+});
+
+export const AuthContextProvider = ({ children }: { children: any }) => {
+	const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+	const { pathname } = useLocation();
+	const navigate = useNavigate();
+
+	const [{ fetching, data, error }] = useQuery({
+		query: AdminSessionQuery,
+	});
+
+	useEffect(() => {
+		if (!fetching && !error) {
+			setIsLoggedIn(true);
+			if (pathname === '/login' || pathname === 'signup') {
+				navigate('/', { replace: true });
+			}
+		}
+	}, [fetching, error]);
+
+	if (fetching) {
+		return (
+			<Center h="100%">
+				<Spinner />
+			</Center>
+		);
+	}
+
+	return (
+		<AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
+			{children}
+		</AuthContext.Provider>
+	);
+};
+
+export const useAuthContext = () => useContext(AuthContext);

dashboard/src/graphql/mutation/index.ts

@@ -0,0 +1,81 @@
+export const AdminSignup = `
+ mutation adminSignup($secret: String!) {
+    _admin_signup (params: {admin_secret: $secret}) {
+      message
+    }
+  }
+`;
+
+export const AdminLogin = `
+mutation adminLogin($secret: String!){
+  _admin_login(params: { admin_secret: $secret }) {
+    message
+  }
+}
+`;
+
+export const AdminLogout = `
+  mutation adminLogout {
+    _admin_logout {
+      message
+    }
+  }
+`;
+
+export const UpdateEnvVariables = `
+  mutation updateEnvVariables($params: UpdateEnvInput!) {
+    _update_env(params: $params) {
+      message
+    }
+  }
+`;
+
+export const UpdateUser = `
+  mutation updateUser($params: UpdateUserInput!) {
+    _update_user(params: $params) {
+      id
+    }
+  }
+`;
+
+export const DeleteUser = `
+  mutation deleteUser($params: DeleteUserInput!) {
+    _delete_user(params: $params) {
+      message
+    }
+  }
+`;
+
+export const InviteMembers = `
+  mutation inviteMembers($params: InviteMemberInput!) {
+    _invite_members(params: $params) {
+      message
+    }
+  }
+`;
+
+export const RevokeAccess = `
+  mutation revokeAccess($param: UpdateAccessInput!) {
+    _revoke_access(param: $param) {
+      message
+    }
+  }
+`;
+
+export const EnableAccess = `
+  mutation revokeAccess($param: UpdateAccessInput!) {
+    _enable_access(param: $param) {
+      message
+    }
+  }
+`;
+
+export const GenerateKeys = `
+  mutation generateKeys($params: GenerateJWTKeysInput!) {
+    _generate_jwt_keys(params: $params) {
+      secret
+      public_key
+      private_key
+    }
+  }
+`;

dashboard/src/graphql/queries/index.ts

@@ -0,0 +1,102 @@
+export const MetaQuery = `
+  query MetaQuery {
+    meta {
+      version
+      client_id
+    }
+  }
+`;
+
+export const AdminSessionQuery = `
+  query {
+    _admin_session{
+	    message
+    }
+  }
+`;
+
+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_REDIS_FOR_ENV,
+      CUSTOM_ACCESS_TOKEN_SCRIPT,
+      DATABASE_NAME,
+      DATABASE_TYPE,
+      DATABASE_URL,
+      ACCESS_TOKEN_EXPIRY_TIME,
+    }
+  }
+`;
+
+export const UserDetailsQuery = `
+  query($params: PaginatedInput) {
+    _users(params: $params) {
+      pagination {
+        limit
+        page
+        offset
+        total
+      }
+      users {
+        id
+        email
+        email_verified
+        given_name
+        family_name
+        middle_name
+        nickname
+        gender
+        birthdate
+        phone_number
+        picture
+        signup_methods
+        roles
+        created_at
+        revoked_timestamp
+      }
+    }
+  }
+`;
+
+export const EmailVerificationQuery = `
+  query {
+    _env{
+      DISABLE_EMAIL_VERIFICATION
+    }
+  }
+`;

dashboard/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+	<div>
+		<App />
+	</div>,
+	document.getElementById('root')
+);

dashboard/src/layouts/AuthLayout.tsx

@@ -0,0 +1,58 @@
+import {
+	Box,
+	Flex,
+	Image,
+	Text,
+	Spinner,
+	useMediaQuery,
+} from '@chakra-ui/react';
+import React from 'react';
+import { useQuery } from 'urql';
+import { MetaQuery } from '../graphql/queries';
+
+export function AuthLayout({ children }: { children: React.ReactNode }) {
+	const [{ fetching, data }] = useQuery({ query: MetaQuery });
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+	return (
+		<Flex
+			h="100vh"
+			bg="gray.100"
+			alignItems="center"
+			justifyContent="center"
+			direction={['column', 'column']}
+			padding={['2%', '2%', '2%', '2%']}
+		>
+			<Flex alignItems="center" maxW="100%">
+				<Image
+					src="https://authorizer.dev/images/logo.png"
+					alt="logo"
+					height="50"
+				/>
+				<Text fontSize="x-large" ml="3" letterSpacing="3">
+					AUTHORIZER
+				</Text>
+			</Flex>
+
+			{fetching ? (
+				<Spinner />
+			) : (
+				<>
+					<Box
+						p="6"
+						m="5"
+						rounded="5"
+						bg="white"
+						w={isNotSmallerScreen ? '500px' : '450px'}
+						shadow="xl"
+						maxW="100%"
+					>
+						{children}
+					</Box>
+					<Text color="gray.600" fontSize="sm">
+						Current Version: {data.meta.version}
+					</Text>
+				</>
+			)}
+		</Flex>
+	);
+}

dashboard/src/layouts/DashboardLayout.tsx

@@ -0,0 +1,39 @@
+import {
+	Box,
+	Drawer,
+	DrawerContent,
+	useDisclosure,
+	useColorModeValue,
+} from '@chakra-ui/react';
+import React, { ReactNode } from 'react';
+import { Sidebar, MobileNav } from '../components/Menu';
+
+export function DashboardLayout({ children }: { children: ReactNode }) {
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	return (
+		<Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}>
+			<Sidebar
+				onClose={() => onClose}
+				display={{ base: 'none', md: 'block' }}
+			/>
+			<Drawer
+				autoFocus={false}
+				isOpen={isOpen}
+				placement="left"
+				onClose={onClose}
+				returnFocusOnClose={false}
+				onOverlayClick={onClose}
+				size="full"
+			>
+				<DrawerContent>
+					<Sidebar onClose={onClose} />
+				</DrawerContent>
+			</Drawer>
+			{/* mobilenav */}
+			<MobileNav onOpen={onOpen} />
+			<Box ml={{ base: 0, md: '64' }} p="4" pt="24">
+				{children}
+			</Box>
+		</Box>
+	);
+}

dashboard/src/pages/Auth.tsx

@@ -0,0 +1,128 @@
+import {
+	Button,
+	FormControl,
+	FormLabel,
+	Input,
+	useToast,
+	VStack,
+	Text,
+} from '@chakra-ui/react';
+import React, { useEffect } from 'react';
+import { useMutation } from 'urql';
+
+import { AuthLayout } from '../layouts/AuthLayout';
+import { AdminLogin, AdminSignup } from '../graphql/mutation';
+import { useNavigate } from 'react-router-dom';
+import { useAuthContext } from '../contexts/AuthContext';
+import { capitalizeFirstLetter, hasAdminSecret } from '../utils';
+
+export default function Auth() {
+	const [loginResult, login] = useMutation(AdminLogin);
+	const [signUpResult, signup] = useMutation(AdminSignup);
+	const { setIsLoggedIn } = useAuthContext();
+
+	const toast = useToast();
+	const navigate = useNavigate();
+	const isLogin = hasAdminSecret();
+
+	const handleSubmit = (e: any) => {
+		e.preventDefault();
+		const formValues = [...e.target.elements].reduce((agg: any, elem: any) => {
+			if (elem.id) {
+				return {
+					...agg,
+					[elem.id]: elem.value,
+				};
+			}
+
+			return agg;
+		}, {});
+
+		(isLogin ? login : signup)({
+			secret: formValues['admin-secret'],
+		}).then((res) => {
+			if (res.data) {
+				setIsLoggedIn(true);
+				navigate('/', { replace: true });
+			}
+		});
+	};
+
+	const errors = isLogin ? loginResult.error : signUpResult.error;
+
+	useEffect(() => {
+		if (errors?.graphQLErrors) {
+			(errors?.graphQLErrors || []).map((error: any) => {
+				toast({
+					title: capitalizeFirstLetter(error.message),
+					isClosable: true,
+					status: 'error',
+					position: 'bottom-right',
+				});
+			});
+		}
+	}, [errors]);
+
+	return (
+		<AuthLayout>
+			<Text
+				fontSize="large"
+				textAlign="center"
+				color="gray.600"
+				fontWeight="bold"
+				mb="2"
+			>
+				Hello Admin 👋 <br />
+			</Text>
+			<Text fontSize="large" textAlign="center" color="gray.500" mb="8">
+				Welcome to Admin Dashboard
+			</Text>
+			<form onSubmit={handleSubmit}>
+				<VStack spacing="5" justify="space-between">
+					<FormControl isRequired>
+						<FormLabel htmlFor="admin-username">Username</FormLabel>
+						<Input
+							size="lg"
+							id="admin-username"
+							placeholder="Username"
+							disabled
+							value="admin"
+						/>
+					</FormControl>
+					<FormControl isRequired>
+						<FormLabel htmlFor="admin-secret">Password</FormLabel>
+						<Input
+							size="lg"
+							id="admin-secret"
+							placeholder="Admin secret"
+							type="password"
+							minLength={!isLogin ? 6 : 1}
+						/>
+					</FormControl>
+					<Button
+						isLoading={signUpResult.fetching || loginResult.fetching}
+						loadingText="Submitting"
+						colorScheme="blue"
+						size="lg"
+						w="100%"
+						type="submit"
+					>
+						{isLogin ? 'Login' : 'Sign up'}
+					</Button>
+					{isLogin ? (
+						<Text color="gray.600" fontSize="sm">
+							<b>Note:</b> In case if you have forgot your admin secret, you can
+							reset it by updating <code>ADMIN_SECRET</code> environment
+							variable. For more information, please refer to the{' '}
+							<a href="https://docs.authorizer.dev/core/env/">documentation</a>.
+						</Text>
+					) : (
+						<Text color="gray.600" fontSize="sm">
+							<b>Note:</b> Configure the password to start using your dashboard.
+						</Text>
+					)}
+				</VStack>
+			</form>
+		</AuthLayout>
+	);
+}

dashboard/src/pages/Environment.tsx

@@ -0,0 +1,321 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Box, Flex, Stack, Button, useToast } from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaSave } from 'react-icons/fa';
+import _ from 'lodash';
+import { EnvVariablesQuery } from '../graphql/queries';
+import {
+	SelectInputType,
+	HiddenInputType,
+	TextInputType,
+	HMACEncryptionType,
+	RSAEncryptionType,
+	ECDSAEncryptionType,
+	envVarTypes,
+	envSubViews,
+} from '../constants';
+import { UpdateEnvVariables } from '../graphql/mutation';
+import { getObjectDiff, capitalizeFirstLetter } from '../utils';
+import OAuthConfig from '../components/EnvComponents/OAuthConfig';
+import Roles from '../components/EnvComponents/Roles';
+import JWTConfigurations from '../components/EnvComponents/JWTConfiguration';
+import SessionStorage from '../components/EnvComponents/SessionStorage';
+import EmailConfigurations from '../components/EnvComponents/EmailConfiguration';
+import DomainWhiteListing from '../components/EnvComponents/DomainWhitelisting';
+import OrganizationInfo from '../components/EnvComponents/OrganizationInfo';
+import AccessToken from '../components/EnvComponents/AccessToken';
+import Features from '../components/EnvComponents/Features';
+import SecurityAdminSecret from '../components/EnvComponents/SecurityAdminSecret';
+import DatabaseCredentials from '../components/EnvComponents/DatabaseCredentials';
+
+const Environment = () => {
+	const client = useClient();
+	const toast = useToast();
+	const [adminSecret, setAdminSecret] = React.useState<
+		Record<string, string | boolean>
+	>({
+		value: '',
+		disableInputField: true,
+	});
+	const [loading, setLoading] = React.useState<boolean>(true);
+	const [envVariables, setEnvVariables] = React.useState<envVarTypes>({
+		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: '',
+		ROLES: [],
+		DEFAULT_ROLES: [],
+		PROTECTED_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: '',
+		CUSTOM_ACCESS_TOKEN_SCRIPT: '',
+		ADMIN_SECRET: '',
+		DISABLE_LOGIN_PAGE: false,
+		DISABLE_MAGIC_LINK_LOGIN: false,
+		DISABLE_EMAIL_VERIFICATION: false,
+		DISABLE_BASIC_AUTHENTICATION: false,
+		DISABLE_SIGN_UP: false,
+		OLD_ADMIN_SECRET: '',
+		DATABASE_NAME: '',
+		DATABASE_TYPE: '',
+		DATABASE_URL: '',
+		ACCESS_TOKEN_EXPIRY_TIME: '',
+	});
+
+	const [fieldVisibility, setFieldVisibility] = React.useState<
+		Record<string, boolean>
+	>({
+		GOOGLE_CLIENT_SECRET: false,
+		GITHUB_CLIENT_SECRET: false,
+		FACEBOOK_CLIENT_SECRET: false,
+		LINKEDIN_CLIENT_SECRET: false,
+		APPLE_CLIENT_SECRET: false,
+		JWT_SECRET: false,
+		SMTP_PASSWORD: false,
+		ADMIN_SECRET: false,
+		OLD_ADMIN_SECRET: false,
+	});
+
+	const { sec } = useParams();
+
+	async function getData() {
+		const {
+			data: { _env: envData },
+		} = await client.query(EnvVariablesQuery).toPromise();
+		setLoading(false);
+
+		setEnvVariables({
+			...envData,
+			OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
+			ADMIN_SECRET: '',
+		});
+		setAdminSecret({
+			value: '',
+			disableInputField: true,
+		});
+	}
+
+	useEffect(() => {
+		getData();
+	}, [sec]);
+
+	const validateAdminSecretHandler = (event: any) => {
+		if (envVariables.OLD_ADMIN_SECRET === event.target.value) {
+			setAdminSecret({
+				...adminSecret,
+				value: event.target.value,
+				disableInputField: false,
+			});
+		} else {
+			setAdminSecret({
+				...adminSecret,
+				value: event.target.value,
+				disableInputField: true,
+			});
+		}
+		if (envVariables.ADMIN_SECRET !== '') {
+			setEnvVariables({ ...envVariables, ADMIN_SECRET: '' });
+		}
+	};
+
+	const saveHandler = async () => {
+		setLoading(true);
+		const {
+			data: { _env: envData },
+		} = await client.query(EnvVariablesQuery).toPromise();
+		const diff = getObjectDiff(envVariables, envData);
+		const updatedEnvVariables = diff.reduce(
+			(acc: any, property: string) => ({
+				...acc,
+				// @ts-ignore
+				[property]: envVariables[property],
+			}),
+			{}
+		);
+		if (
+			updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === '' ||
+			updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] !==
+				envData.ADMIN_SECRET
+		) {
+			delete updatedEnvVariables.OLD_ADMIN_SECRET;
+			delete updatedEnvVariables.ADMIN_SECRET;
+		}
+
+		delete updatedEnvVariables.DATABASE_URL;
+		delete updatedEnvVariables.DATABASE_TYPE;
+		delete updatedEnvVariables.DATABASE_NAME;
+
+		const res = await client
+			.mutation(UpdateEnvVariables, { params: updatedEnvVariables })
+			.toPromise();
+
+		setLoading(false);
+
+		if (res.error) {
+			toast({
+				title: capitalizeFirstLetter(res.error.message),
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+
+			return;
+		}
+
+		setAdminSecret({
+			value: '',
+			disableInputField: true,
+		});
+
+		getData();
+
+		toast({
+			title: `Successfully updated ${
+				Object.keys(updatedEnvVariables).length
+			} variables`,
+			isClosable: true,
+			status: 'success',
+			position: 'bottom-right',
+		});
+	};
+
+	const renderComponent = (tab: any) => {
+		switch (tab) {
+			case envSubViews.INSTANCE_INFO:
+				return (
+					<OAuthConfig
+						envVariables={envVariables}
+						setVariables={setEnvVariables}
+						fieldVisibility={fieldVisibility}
+						setFieldVisibility={setFieldVisibility}
+					/>
+				);
+			case envSubViews.ROLES:
+				return (
+					<Roles variables={envVariables} setVariables={setEnvVariables} />
+				);
+			case envSubViews.JWT_CONFIG:
+				return (
+					<JWTConfigurations
+						variables={envVariables}
+						setVariables={setEnvVariables}
+						fieldVisibility={fieldVisibility}
+						setFieldVisibility={setFieldVisibility}
+						SelectInputType={SelectInputType.JWT_TYPE}
+						HMACEncryptionType={HMACEncryptionType}
+						RSAEncryptionType={RSAEncryptionType}
+						ECDSAEncryptionType={ECDSAEncryptionType}
+						getData={getData}
+					/>
+				);
+			case envSubViews.SESSION_STORAGE:
+				return (
+					<SessionStorage
+						variables={envVariables}
+						setVariables={setEnvVariables}
+						RedisURL={TextInputType.REDIS_URL}
+					/>
+				);
+			case envSubViews.EMAIL_CONFIG:
+				return (
+					<EmailConfigurations
+						variables={envVariables}
+						setVariables={setEnvVariables}
+						fieldVisibility={fieldVisibility}
+						setFieldVisibility={setFieldVisibility}
+					/>
+				);
+			case envSubViews.WHITELIST_VARIABLES:
+				return (
+					<DomainWhiteListing
+						variables={envVariables}
+						setVariables={setEnvVariables}
+					/>
+				);
+			case envSubViews.ORGANIZATION_INFO:
+				return (
+					<OrganizationInfo
+						variables={envVariables}
+						setVariables={setEnvVariables}
+					/>
+				);
+			case envSubViews.ACCESS_TOKEN:
+				return (
+					<AccessToken
+						variables={envVariables}
+						setVariables={setEnvVariables}
+					/>
+				);
+			case envSubViews.FEATURES:
+				return (
+					<Features variables={envVariables} setVariables={setEnvVariables} />
+				);
+			case envSubViews.ADMIN_SECRET:
+				return (
+					<SecurityAdminSecret
+						variables={envVariables}
+						setVariables={setEnvVariables}
+						fieldVisibility={fieldVisibility}
+						setFieldVisibility={setFieldVisibility}
+						validateAdminSecretHandler={validateAdminSecretHandler}
+						adminSecret={adminSecret}
+					/>
+				);
+			case envSubViews.DB_CRED:
+				return (
+					<DatabaseCredentials
+						variables={envVariables}
+						setVariables={setEnvVariables}
+					/>
+				);
+			default:
+				return (
+					<OAuthConfig
+						envVariables={envVariables}
+						setVariables={setEnvVariables}
+						fieldVisibility={fieldVisibility}
+						setFieldVisibility={setFieldVisibility}
+					/>
+				);
+		}
+	};
+	return (
+		<Box m="5" py="5" px="10" bg="white" rounded="md">
+			{renderComponent(sec)}
+			<Stack spacing={6} padding="1% 0" mt={4}>
+				<Flex justifyContent="end" alignItems="center">
+					<Button
+						leftIcon={<FaSave />}
+						colorScheme="blue"
+						variant="solid"
+						onClick={saveHandler}
+						isDisabled={loading}
+					>
+						Save
+					</Button>
+				</Flex>
+			</Stack>
+		</Box>
+	);
+};
+
+export default Environment;

dashboard/src/pages/Home.tsx

@@ -0,0 +1,18 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+export default function Home() {
+	return (
+		<>
+			<Text fontSize="2xl" fontWeight="bold">
+				Hi there 👋 <br />
+			</Text>
+
+			<Text fontSize="xl" color="gray.700">
+				Welcome to Authorizer Administrative Dashboard! <br />
+				Please use this dashboard to configure your environment variables or
+				have look at your users
+			</Text>
+		</>
+	);
+}

dashboard/src/pages/Users.tsx

@@ -0,0 +1,517 @@
+import React from 'react';
+import { useClient } from 'urql';
+import dayjs from 'dayjs';
+import {
+	Box,
+	Flex,
+	IconButton,
+	NumberDecrementStepper,
+	NumberIncrementStepper,
+	NumberInput,
+	NumberInputField,
+	NumberInputStepper,
+	Select,
+	Table,
+	Tag,
+	Tbody,
+	Td,
+	Text,
+	TableCaption,
+	Th,
+	Thead,
+	Tooltip,
+	Tr,
+	Button,
+	Center,
+	Menu,
+	MenuButton,
+	MenuList,
+	MenuItem,
+	useToast,
+	Spinner,
+} from '@chakra-ui/react';
+import {
+	FaAngleLeft,
+	FaAngleRight,
+	FaAngleDoubleLeft,
+	FaAngleDoubleRight,
+	FaExclamationCircle,
+	FaAngleDown,
+} from 'react-icons/fa';
+import { EmailVerificationQuery, UserDetailsQuery } from '../graphql/queries';
+import { EnableAccess, RevokeAccess, UpdateUser } from '../graphql/mutation';
+import EditUserModal from '../components/EditUserModal';
+import DeleteUserModal from '../components/DeleteUserModal';
+import InviteMembersModal from '../components/InviteMembersModal';
+
+interface paginationPropTypes {
+	limit: number;
+	page: number;
+	offset: number;
+	total: number;
+	maxPages: number;
+}
+
+interface userDataTypes {
+	id: string;
+	email: string;
+	email_verified: boolean;
+	given_name: string;
+	family_name: string;
+	middle_name: string;
+	nickname: string;
+	gender: string;
+	birthdate: string;
+	phone_number: string;
+	picture: string;
+	signup_methods: string;
+	roles: [string];
+	created_at: number;
+	revoked_timestamp: number;
+}
+
+const enum updateAccessActions {
+	REVOKE = 'REVOKE',
+	ENABLE = 'ENABLE',
+}
+
+const getMaxPages = (pagination: paginationPropTypes) => {
+	const { limit, total } = pagination;
+	if (total > 1) {
+		return total % limit === 0
+			? total / limit
+			: parseInt(`${total / limit}`) + 1;
+	} else return 1;
+};
+
+const getLimits = (pagination: paginationPropTypes) => {
+	const { total } = pagination;
+	const limits = [5];
+	if (total > 10) {
+		for (let i = 10; i <= total && limits.length <= 10; i += 5) {
+			limits.push(i);
+		}
+	}
+	return limits;
+};
+
+export default function Users() {
+	const client = useClient();
+	const toast = useToast();
+	const [paginationProps, setPaginationProps] =
+		React.useState<paginationPropTypes>({
+			limit: 5,
+			page: 1,
+			offset: 0,
+			total: 0,
+			maxPages: 1,
+		});
+	const [userList, setUserList] = React.useState<userDataTypes[]>([]);
+	const [loading, setLoading] = React.useState<boolean>(false);
+	const [disableInviteMembers, setDisableInviteMembers] =
+		React.useState<boolean>(true);
+	const updateUserList = async () => {
+		setLoading(true);
+		const { data } = await client
+			.query(UserDetailsQuery, {
+				params: {
+					pagination: {
+						limit: paginationProps.limit,
+						page: paginationProps.page,
+					},
+				},
+			})
+			.toPromise();
+		if (data?._users) {
+			const { pagination, users } = data._users;
+			const maxPages = getMaxPages(pagination);
+			if (users && users.length > 0) {
+				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
+				setUserList(users);
+			} else {
+				if (paginationProps.page !== 1) {
+					setPaginationProps({
+						...paginationProps,
+						...pagination,
+						maxPages,
+						page: 1,
+					});
+				}
+			}
+		}
+		setLoading(false);
+	};
+	const checkEmailVerification = async () => {
+		setLoading(true);
+		const { data } = await client.query(EmailVerificationQuery).toPromise();
+		if (data?._env) {
+			const { DISABLE_EMAIL_VERIFICATION } = data._env;
+			setDisableInviteMembers(DISABLE_EMAIL_VERIFICATION);
+		}
+		setLoading(false);
+	};
+	React.useEffect(() => {
+		updateUserList();
+		checkEmailVerification();
+	}, []);
+	React.useEffect(() => {
+		updateUserList();
+	}, [paginationProps.page, paginationProps.limit]);
+
+	const paginationHandler = (value: Record<string, number>) => {
+		setPaginationProps({ ...paginationProps, ...value });
+	};
+
+	const userVerificationHandler = async (user: userDataTypes) => {
+		const { id, email } = user;
+		const res = await client
+			.mutation(UpdateUser, {
+				params: {
+					id,
+					email,
+					email_verified: true,
+				},
+			})
+			.toPromise();
+		if (res.error) {
+			toast({
+				title: 'User verification failed',
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+		} else if (res.data?._update_user?.id) {
+			toast({
+				title: 'User verification successful',
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		}
+		updateUserList();
+	};
+
+	const updateAccessHandler = async (
+		id: string,
+		action: updateAccessActions
+	) => {
+		switch (action) {
+			case updateAccessActions.ENABLE:
+				const enableAccessRes = await client
+					.mutation(EnableAccess, {
+						param: {
+							user_id: id,
+						},
+					})
+					.toPromise();
+				if (enableAccessRes.error) {
+					toast({
+						title: 'User access enable failed',
+						isClosable: true,
+						status: 'error',
+						position: 'bottom-right',
+					});
+				} else {
+					toast({
+						title: 'User access enabled successfully',
+						isClosable: true,
+						status: 'success',
+						position: 'bottom-right',
+					});
+				}
+				updateUserList();
+				break;
+			case updateAccessActions.REVOKE:
+				const revokeAccessRes = await client
+					.mutation(RevokeAccess, {
+						param: {
+							user_id: id,
+						},
+					})
+					.toPromise();
+				if (revokeAccessRes.error) {
+					toast({
+						title: 'User access revoke failed',
+						isClosable: true,
+						status: 'error',
+						position: 'bottom-right',
+					});
+				} else {
+					toast({
+						title: 'User access revoked successfully',
+						isClosable: true,
+						status: 'success',
+						position: 'bottom-right',
+					});
+				}
+				updateUserList();
+				break;
+			default:
+				break;
+		}
+	};
+
+	return (
+		<Box m="5" py="5" px="10" bg="white" rounded="md">
+			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
+				<Text fontSize="md" fontWeight="bold">
+					Users
+				</Text>
+				<InviteMembersModal
+					disabled={disableInviteMembers}
+					updateUserList={updateUserList}
+				/>
+			</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>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>
+											<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)}
+														>
+															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>
+													)}
+												</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),
+												})
+											}
+										>
+											{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>
+				) : (
+					<Flex
+						flexDirection="column"
+						minH="25vh"
+						justifyContent="center"
+						alignItems="center"
+					>
+						<Center w="50px" marginRight="1.5%">
+							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
+						</Center>
+						<Text
+							fontSize="2xl"
+							paddingRight="1%"
+							fontWeight="bold"
+							color="#d9d9d9"
+						>
+							No Data
+						</Text>
+					</Flex>
+				)
+			) : (
+				<Center minH="25vh">
+					<Spinner />
+				</Center>
+			)}
+		</Box>
+	);
+}

dashboard/src/routes/index.tsx

@@ -0,0 +1,47 @@
+import React, { lazy, Suspense } from 'react';
+import { Outlet, Route, Routes } from 'react-router-dom';
+
+import { useAuthContext } from '../contexts/AuthContext';
+import { DashboardLayout } from '../layouts/DashboardLayout';
+
+const Auth = lazy(() => import('../pages/Auth'));
+const Environment = lazy(() => import('../pages/Environment'));
+const Home = lazy(() => import('../pages/Home'));
+const Users = lazy(() => import('../pages/Users'));
+
+export const AppRoutes = () => {
+	const { isLoggedIn } = useAuthContext();
+
+	if (isLoggedIn) {
+		return (
+		<div>
+			<Suspense fallback={<></>}>
+				<Routes>
+					<Route
+						element={
+							<DashboardLayout>
+								<Outlet />
+							</DashboardLayout>
+						}
+					>
+						 <Route path="/" element={<Outlet />}>
+              				<Route index element={<Environment />} />
+              				<Route path="/:sec" element={<Environment />} />
+           				 </Route>
+           				 <Route path="users" element={<Users />} />
+         				   <Route path="*" element={<Home />} />
+					</Route>
+				</Routes>
+			</Suspense>
+		</div>
+		);
+	}
+	return (
+		<Suspense fallback={<></>}>
+			<Routes>
+				<Route path="/" element={<Auth />} />
+				<Route path="*" element={<Auth />} />
+			</Routes>
+		</Suspense>
+	);
+};

dashboard/src/utils/index.ts

@@ -0,0 +1,88 @@
+import _ from 'lodash';
+
+export const hasAdminSecret = () => {
+	return (<any>window)['__authorizer__'].isOnboardingCompleted === true;
+};
+
+export const capitalizeFirstLetter = (data: string): string =>
+	data.charAt(0).toUpperCase() + data.slice(1);
+
+const fallbackCopyTextToClipboard = (text: string) => {
+	const textArea = document.createElement('textarea');
+
+	textArea.value = text;
+	textArea.style.top = '0';
+	textArea.style.left = '0';
+	textArea.style.position = 'fixed';
+
+	document.body.appendChild(textArea);
+	textArea.focus();
+	textArea.select();
+
+	try {
+		const successful = document.execCommand('copy');
+		const msg = successful ? 'successful' : 'unsuccessful';
+		console.log('Fallback: Copying text command was ' + msg);
+	} catch (err) {
+		console.error('Fallback: Oops, unable to copy', err);
+	}
+	document.body.removeChild(textArea);
+};
+
+export const copyTextToClipboard = (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);
+		}
+	);
+};
+
+export const getObjectDiff = (obj1: any, obj2: any) => {
+	const diff = Object.keys(obj1).reduce((result, key) => {
+		if (!obj2.hasOwnProperty(key)) {
+			result.push(key);
+		} else if (
+			_.isEqual(obj1[key], obj2[key]) ||
+			(obj1[key] === null && obj2[key] === '') ||
+			(obj1[key] &&
+				Array.isArray(obj1[key]) &&
+				obj1[key].length === 0 &&
+				obj2[key] === null)
+		) {
+			const resultKeyIndex = result.indexOf(key);
+			result.splice(resultKeyIndex, 1);
+		}
+		return result;
+	}, Object.keys(obj2));
+
+	return diff;
+};
+
+export const validateEmail = (email: string) => {
+	if (!email || email === '') return true;
+	return email
+		.toLowerCase()
+		.match(
+			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+		)
+		? true
+		: false;
+};
+
+export const validateURI = (uri: string) => {
+	if (!uri || uri === '') return true;
+	return uri
+		.toLowerCase()
+		.match(
+			/(?:^|\s)((https?:\/\/)?(?:localhost|[\w-]+(?:\.[\w-]+)+)(:\d+)?(\/\S*)?)/
+		)
+		? true
+		: false;
+};

dashboard/src/utils/parseCSV.ts

@@ -0,0 +1,39 @@
+import _flatten from 'lodash/flatten';
+import { validateEmail } from '.';
+
+interface dataTypes {
+	value: string;
+	isInvalid: boolean;
+}
+
+const parseCSV = (file: File, delimiter: string): Promise<dataTypes[]> => {
+	return new Promise((resolve) => {
+		const reader = new FileReader();
+
+		// When the FileReader has loaded the file...
+		reader.onload = (e: any) => {
+			// Split the result to an array of lines
+			const lines = e.target.result.split('\n');
+			// Split the lines themselves by the specified
+			// delimiter, such as a comma
+			let result = lines.map((line: string) => line.split(delimiter));
+			// As the FileReader reads asynchronously,
+			// we can't just return the result; instead,
+			// we're passing it to a callback function
+			result = _flatten(result);
+			resolve(
+				result.map((email: string) => {
+					return {
+						value: email.trim(),
+						isInvalid: !validateEmail(email.trim()),
+					};
+				})
+			);
+		};
+
+		// Read the file content as a single string
+		reader.readAsText(file);
+	});
+};
+
+export default parseCSV;

dashboard/tsconfig.json

@@ -0,0 +1,73 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Basic Options */
+		// "incremental": true,                         /* Enable incremental compilation */
+		"target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
+		"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+		// "lib": ["es2018", "dom"],                                   /* Specify library files to be included in the compilation. */
+		// "allowJs": true,                             /* Allow javascript files to be compiled. */
+		// "checkJs": true,                             /* Report errors in .js files. */
+		"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+		// "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+		// "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
+		// "sourceMap": true,                           /* Generates corresponding '.map' file. */
+		// "outFile": "./",                             /* Concatenate and emit output to single file. */
+		// "outDir": "./",                              /* Redirect output structure to the directory. */
+		"rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+		// "composite": true,                           /* Enable project compilation */
+		// "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
+		// "removeComments": true,                      /* Do not emit comments to output. */
+		// "noEmit": true,                              /* Do not emit outputs. */
+		// "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+		// "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+		// "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+		/* Strict Type-Checking Options */
+		"strict": true /* Enable all strict type-checking options. */,
+		// "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,                    /* Enable strict null checks. */
+		// "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+		// "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+		// "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
+		// "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
+		/* Additional Checks */
+		// "noUnusedLocals": true,                      /* Report errors on unused locals. */
+		// "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+		// "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+		// "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+		// "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
+		// "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
+		/* Module Resolution Options */
+		// "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+		// "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+		// "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+		// "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                             /* List of folders to include type definitions from. */
+		// "types": [],                                 /* Type declaration files to be included in compilation. */
+		// "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		// "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+		// "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		// "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+		// "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+
+		/* Advanced Options */
+		"skipLibCheck": true /* Skip type checking of declaration files. */,
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+		"lib": ["esnext", "dom"]
+	}
+}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "authorizer",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

scripts/build-mac.sh

@@ -1,7 +1,7 @@
 VERSION="$1"
 make clean && make build-app && CGO_ENABLED=1 VERSION=${VERSION} make
 FILE_NAME=authorizer-${VERSION}-darwin-amd64.tar.gz
-tar cvfz ${FILE_NAME} .env app/build build templates
+tar cvfz ${FILE_NAME} .env app/build build templates dashboard/build
 AUTH="Authorization: token $GITHUB_TOKEN"
 RELASE_INFO=$(curl -sH "$AUTH" https://api.github.com/repos/authorizerdev/authorizer/releases/tags/${VERSION})
 echo $RELASE_INFO

server/__test__/env_test.go

@@ -1,25 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/stretchr/testify/assert"
-)
-
-func TestEnvs(t *testing.T) {
-	constants.ENV_PATH = "../../.env.sample"
-
-	assert.Equal(t, constants.ADMIN_SECRET, "admin")
-	assert.Equal(t, constants.ENV, "production")
-	assert.False(t, constants.DISABLE_EMAIL_VERIFICATION)
-	assert.False(t, constants.DISABLE_MAGIC_LINK_LOGIN)
-	assert.False(t, constants.DISABLE_BASIC_AUTHENTICATION)
-	assert.Equal(t, constants.JWT_TYPE, "HS256")
-	assert.Equal(t, constants.JWT_SECRET, "random_string")
-	assert.Equal(t, constants.JWT_ROLE_CLAIM, "role")
-	assert.EqualValues(t, constants.ROLES, []string{"user"})
-	assert.EqualValues(t, constants.DEFAULT_ROLES, []string{"user"})
-	assert.EqualValues(t, constants.PROTECTED_ROLES, []string{"admin"})
-	assert.EqualValues(t, constants.ALLOWED_ORIGINS, []string{"*"})
-}

server/__test__/logout_test.go

@@ -1,35 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func logoutTests(s TestSetup, t *testing.T) {
-	t.Run(`should logout user`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "logout." + s.TestInfo.Email
-
-		_, err := resolvers.MagicLinkLogin(ctx, model.MagicLinkLoginInput{
-			Email: email,
-		})
-
-		verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.MagicLinkLogin.String())
-		verifyRes, err := resolvers.VerifyEmail(ctx, model.VerifyEmailInput{
-			Token: verificationRequest.Token,
-		})
-
-		token := *verifyRes.AccessToken
-		req.Header.Add("Authorization", "Bearer "+token)
-		_, err = resolvers.Logout(ctx)
-		assert.Nil(t, err)
-		_, err = resolvers.Profile(ctx)
-		assert.NotNil(t, err, "unauthorized")
-		cleanData(email)
-	})
-}

server/__test__/magic_link_login_test.go

@@ -1,35 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func magicLinkLoginTests(s TestSetup, t *testing.T) {
-	t.Run(`should login with magic link`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "magic_link_login." + s.TestInfo.Email
-
-		_, err := resolvers.MagicLinkLogin(ctx, model.MagicLinkLoginInput{
-			Email: email,
-		})
-		assert.Nil(t, err)
-
-		verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.MagicLinkLogin.String())
-		verifyRes, err := resolvers.VerifyEmail(ctx, model.VerifyEmailInput{
-			Token: verificationRequest.Token,
-		})
-
-		token := *verifyRes.AccessToken
-		req.Header.Add("Authorization", "Bearer "+token)
-		_, err = resolvers.Profile(ctx)
-		assert.Nil(t, err)
-
-		cleanData(email)
-	})
-}

server/__test__/profile_test.go

@@ -1,42 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func profileTests(s TestSetup, t *testing.T) {
-	t.Run(`should get profile only with token`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "profile." + s.TestInfo.Email
-
-		resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		_, err := resolvers.Profile(ctx)
-		assert.NotNil(t, err, "unauthorized")
-
-		verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.BasicAuthSignup.String())
-		verifyRes, err := resolvers.VerifyEmail(ctx, model.VerifyEmailInput{
-			Token: verificationRequest.Token,
-		})
-
-		token := *verifyRes.AccessToken
-		req.Header.Add("Authorization", "Bearer "+token)
-		profileRes, err := resolvers.Profile(ctx)
-		assert.Nil(t, err)
-
-		newEmail := *&profileRes.Email
-		assert.Equal(t, email, newEmail, "emails should be equal")
-
-		cleanData(email)
-	})
-}

server/__test__/resolvers_test.go

@@ -1,47 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-)
-
-func TestResolvers(t *testing.T) {
-	databases := map[string]string{
-		enum.Sqlite.String():   "../../data.db",
-		enum.Arangodb.String(): "http://root:root@localhost:8529",
-		enum.Mongodb.String():  "mongodb://localhost:27017",
-	}
-
-	for dbType, dbURL := range databases {
-		constants.DATABASE_URL = dbURL
-		constants.DATABASE_TYPE = dbType
-		db.InitDB()
-
-		s := testSetup()
-		defer s.Server.Close()
-
-		t.Run("should pass tests for "+dbType, func(t *testing.T) {
-			loginTests(s, t)
-			signupTests(s, t)
-			forgotPasswordTest(s, t)
-			resendVerifyEmailTests(s, t)
-			resetPasswordTest(s, t)
-			verifyEmailTest(s, t)
-			sessionTests(s, t)
-			profileTests(s, t)
-			updateProfileTests(s, t)
-			magicLinkLoginTests(s, t)
-			logoutTests(s, t)
-			metaTests(s, t)
-
-			// admin tests
-			verificationRequestsTest(s, t)
-			usersTest(s, t)
-			deleteUserTest(s, t)
-			updateUserTest(s, t)
-		})
-	}
-}

server/__test__/session_test.go

@@ -1,42 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func sessionTests(s TestSetup, t *testing.T) {
-	t.Run(`should allow access to profile with session only`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "session." + s.TestInfo.Email
-
-		resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		_, err := resolvers.Session(ctx, []string{})
-		assert.NotNil(t, err, "unauthorized")
-
-		verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.BasicAuthSignup.String())
-		verifyRes, err := resolvers.VerifyEmail(ctx, model.VerifyEmailInput{
-			Token: verificationRequest.Token,
-		})
-
-		token := *verifyRes.AccessToken
-		req.Header.Add("Authorization", "Bearer "+token)
-		sessionRes, err := resolvers.Session(ctx, []string{})
-		assert.Nil(t, err)
-
-		newToken := *sessionRes.AccessToken
-		assert.Equal(t, token, newToken, "tokens should be equal")
-
-		cleanData(email)
-	})
-}

server/__test__/signup_test.go

@@ -1,47 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func signupTests(s TestSetup, t *testing.T) {
-	t.Run(`should complete the signup and check duplicates`, func(t *testing.T) {
-		_, ctx := createContext(s)
-		email := "signup." + s.TestInfo.Email
-		res, err := resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password + "s",
-		})
-		assert.NotNil(t, err, "invalid password errors")
-
-		res, err = resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		user := *res.User
-		assert.Equal(t, email, user.Email)
-		assert.Nil(t, res.AccessToken, "access token should be nil")
-
-		res, err = resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		assert.NotNil(t, err, "should throw duplicate email error")
-
-		verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.BasicAuthSignup.String())
-		assert.Nil(t, err)
-		assert.Equal(t, email, verificationRequest.Email)
-		cleanData(email)
-	})
-}

server/__test__/test.go

@@ -1,93 +0,0 @@
-package test
-
-import (
-	"context"
-	"net/http"
-	"net/http/httptest"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/env"
-	"github.com/authorizerdev/authorizer/server/handlers"
-	"github.com/authorizerdev/authorizer/server/middlewares"
-	"github.com/authorizerdev/authorizer/server/session"
-	"github.com/gin-contrib/location"
-	"github.com/gin-gonic/gin"
-)
-
-// common user data to share across tests
-type TestData struct {
-	Email    string
-	Password string
-}
-
-type TestSetup struct {
-	GinEngine  *gin.Engine
-	GinContext *gin.Context
-	Server     *httptest.Server
-	TestInfo   TestData
-}
-
-func cleanData(email string) {
-	verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.BasicAuthSignup.String())
-	if err == nil {
-		err = db.Mgr.DeleteVerificationRequest(verificationRequest)
-	}
-
-	verificationRequest, err = db.Mgr.GetVerificationByEmail(email, enum.ForgotPassword.String())
-	if err == nil {
-		err = db.Mgr.DeleteVerificationRequest(verificationRequest)
-	}
-
-	verificationRequest, err = db.Mgr.GetVerificationByEmail(email, enum.UpdateEmail.String())
-	if err == nil {
-		err = db.Mgr.DeleteVerificationRequest(verificationRequest)
-	}
-
-	dbUser, err := db.Mgr.GetUserByEmail(email)
-	if err == nil {
-		db.Mgr.DeleteUser(dbUser)
-		db.Mgr.DeleteUserSession(dbUser.ID)
-	}
-}
-
-func createContext(s TestSetup) (*http.Request, context.Context) {
-	req, _ := http.NewRequest(
-		"POST",
-		"http://"+s.Server.Listener.Addr().String()+"/graphql",
-		nil,
-	)
-
-	ctx := context.WithValue(req.Context(), "GinContextKey", s.GinContext)
-	s.GinContext.Request = req
-	return req, ctx
-}
-
-func testSetup() TestSetup {
-	testData := TestData{
-		Email:    "authorizer_tester@yopmail.com",
-		Password: "test",
-	}
-
-	constants.ENV_PATH = "../../.env.sample"
-	env.InitEnv()
-	session.InitSession()
-
-	w := httptest.NewRecorder()
-	c, r := gin.CreateTestContext(w)
-	r.Use(location.Default())
-	r.Use(middlewares.GinContextToContextMiddleware())
-	r.Use(middlewares.CORSMiddleware())
-
-	r.POST("/graphql", handlers.GraphqlHandler())
-
-	server := httptest.NewServer(r)
-
-	return TestSetup{
-		GinEngine:  r,
-		GinContext: c,
-		Server:     server,
-		TestInfo:   testData,
-	}
-}

server/__test__/update_profile_test.go

@@ -1,53 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func updateProfileTests(s TestSetup, t *testing.T) {
-	t.Run(`should update the profile with access token only`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "update_profile." + s.TestInfo.Email
-
-		resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		fName := "samani"
-		_, err := resolvers.UpdateProfile(ctx, model.UpdateProfileInput{
-			FamilyName: &fName,
-		})
-		assert.NotNil(t, err, "unauthorized")
-
-		verificationRequest, err := db.Mgr.GetVerificationByEmail(email, enum.BasicAuthSignup.String())
-		verifyRes, err := resolvers.VerifyEmail(ctx, model.VerifyEmailInput{
-			Token: verificationRequest.Token,
-		})
-
-		token := *verifyRes.AccessToken
-		req.Header.Add("Authorization", "Bearer "+token)
-		_, err = resolvers.UpdateProfile(ctx, model.UpdateProfileInput{
-			FamilyName: &fName,
-		})
-		assert.Nil(t, err)
-
-		newEmail := "new_" + email
-		_, err = resolvers.UpdateProfile(ctx, model.UpdateProfileInput{
-			Email: &newEmail,
-		})
-		assert.Nil(t, err)
-		_, err = resolvers.Profile(ctx)
-		assert.NotNil(t, err, "unauthorized")
-
-		cleanData(newEmail)
-		cleanData(email)
-	})
-}

server/__test__/update_user_test.go

@@ -1,40 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func updateUserTest(s TestSetup, t *testing.T) {
-	t.Run(`should update the user with admin secret only`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "update_user." + s.TestInfo.Email
-		signupRes, _ := resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		user := *signupRes.User
-		adminRole := "admin"
-		userRole := "user"
-		newRoles := []*string{&adminRole, &userRole}
-		_, err := resolvers.UpdateUser(ctx, model.UpdateUserInput{
-			ID:    user.ID,
-			Roles: newRoles,
-		})
-		assert.NotNil(t, err, "unauthorized")
-
-		req.Header.Add("x-authorizer-admin-secret", constants.ADMIN_SECRET)
-		_, err = resolvers.UpdateUser(ctx, model.UpdateUserInput{
-			ID:    user.ID,
-			Roles: newRoles,
-		})
-		assert.Nil(t, err)
-		cleanData(email)
-	})
-}

server/__test__/users_test.go

@@ -1,33 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func usersTest(s TestSetup, t *testing.T) {
-	t.Run(`should get users list with admin secret only`, func(t *testing.T) {
-		req, ctx := createContext(s)
-		email := "users." + s.TestInfo.Email
-		resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		users, err := resolvers.Users(ctx)
-		assert.NotNil(t, err, "unauthorized")
-
-		req.Header.Add("x-authorizer-admin-secret", constants.ADMIN_SECRET)
-		users, err = resolvers.Users(ctx)
-		assert.Nil(t, err)
-		rLen := len(users)
-		assert.GreaterOrEqual(t, rLen, 1)
-
-		cleanData(email)
-	})
-}

server/__test__/validator_test.go

@@ -1,43 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/enum"
-	"github.com/authorizerdev/authorizer/server/utils"
-	"github.com/stretchr/testify/assert"
-)
-
-func TestIsValidEmail(t *testing.T) {
-	validEmail := "lakhan@gmail.com"
-	invalidEmail1 := "lakhan"
-	invalidEmail2 := "lakhan.me"
-
-	assert.True(t, utils.IsValidEmail(validEmail), "it should be valid email")
-	assert.False(t, utils.IsValidEmail(invalidEmail1), "it should be invalid email")
-	assert.False(t, utils.IsValidEmail(invalidEmail2), "it should be invalid email")
-}
-
-func TestIsValidOrigin(t *testing.T) {
-	// don't use portocal(http/https) for ALLOWED_ORIGINS while testing,
-	// as we trim them off while running the main function
-	constants.ALLOWED_ORIGINS = []string{"localhost:8080", "*.google.com", "*.google.in", "*abc.*"}
-
-	assert.False(t, utils.IsValidOrigin("http://myapp.com"), "it should be invalid origin")
-	assert.False(t, utils.IsValidOrigin("http://appgoogle.com"), "it should be invalid origin")
-	assert.True(t, utils.IsValidOrigin("http://app.google.com"), "it should be valid origin")
-	assert.False(t, utils.IsValidOrigin("http://app.google.ind"), "it should be invalid origin")
-	assert.True(t, utils.IsValidOrigin("http://app.google.in"), "it should be valid origin")
-	assert.True(t, utils.IsValidOrigin("http://xyx.abc.com"), "it should be valid origin")
-	assert.True(t, utils.IsValidOrigin("http://xyx.abc.in"), "it should be valid origin")
-	assert.True(t, utils.IsValidOrigin("http://xyxabc.in"), "it should be valid origin")
-	assert.True(t, utils.IsValidOrigin("http://localhost:8080"), "it should be valid origin")
-}
-
-func TestIsValidIdentifier(t *testing.T) {
-	assert.False(t, utils.IsValidVerificationIdentifier("test"), "it should be invalid identifier")
-	assert.True(t, utils.IsValidVerificationIdentifier(enum.BasicAuthSignup.String()), "it should be valid identifier")
-	assert.True(t, utils.IsValidVerificationIdentifier(enum.UpdateEmail.String()), "it should be valid identifier")
-	assert.True(t, utils.IsValidVerificationIdentifier(enum.ForgotPassword.String()), "it should be valid identifier")
-}

server/__test__/verification_requests_test.go

@@ -1,35 +0,0 @@
-package test
-
-import (
-	"testing"
-
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/graph/model"
-	"github.com/authorizerdev/authorizer/server/resolvers"
-	"github.com/stretchr/testify/assert"
-)
-
-func verificationRequestsTest(s TestSetup, t *testing.T) {
-	t.Run(`should get verification requests with admin secret only`, func(t *testing.T) {
-		req, ctx := createContext(s)
-
-		email := "verification_requests." + s.TestInfo.Email
-		resolvers.Signup(ctx, model.SignUpInput{
-			Email:           email,
-			Password:        s.TestInfo.Password,
-			ConfirmPassword: s.TestInfo.Password,
-		})
-
-		requests, err := resolvers.VerificationRequests(ctx)
-		assert.NotNil(t, err, "unauthorizer")
-
-		req.Header.Add("x-authorizer-admin-secret", constants.ADMIN_SECRET)
-		requests, err = resolvers.VerificationRequests(ctx)
-
-		assert.Nil(t, err)
-		rLen := len(requests)
-		assert.GreaterOrEqual(t, rLen, 1)
-
-		cleanData(email)
-	})
-}

server/cli/cli.go

@@ -0,0 +1,14 @@
+package cli
+
+var (
+	// ARG_DB_URL is the cli arg variable for the database url
+	ARG_DB_URL *string
+	// ARG_DB_TYPE is the cli arg variable for the database type
+	ARG_DB_TYPE *string
+	// ARG_ENV_FILE is the cli arg variable for the env file
+	ARG_ENV_FILE *string
+	// ARG_LOG_LEVEL is the cli arg variable for the log level
+	ARG_LOG_LEVEL *string
+	// ARG_REDIS_URL is the cli arg variable for the redis url
+	ARG_REDIS_URL *string
+)

server/constants/constants.go

@@ -1,51 +0,0 @@
-package constants
-
-// this constants are configured via env
-var (
-	ADMIN_SECRET                 = ""
-	ENV                          = ""
-	ENV_PATH                     = ""
-	VERSION                      = ""
-	DATABASE_TYPE                = ""
-	DATABASE_URL                 = ""
-	DATABASE_NAME                = ""
-	SMTP_HOST                    = ""
-	SMTP_PORT                    = ""
-	SMTP_USERNAME                = ""
-	SMTP_PASSWORD                = ""
-	SENDER_EMAIL                 = ""
-	JWT_TYPE                     = ""
-	JWT_SECRET                   = ""
-	ALLOWED_ORIGINS              = []string{}
-	AUTHORIZER_URL               = ""
-	APP_URL                      = ""
-	PORT                         = ""
-	REDIS_URL                    = ""
-	IS_PROD                      = false
-	COOKIE_NAME                  = ""
-	RESET_PASSWORD_URL           = ""
-	DISABLE_EMAIL_VERIFICATION   = false
-	DISABLE_BASIC_AUTHENTICATION = false
-	DISABLE_MAGIC_LINK_LOGIN     = false
-	DISABLE_LOGIN_PAGE           = false
-
-	// ROLES
-	ROLES           = []string{}
-	PROTECTED_ROLES = []string{}
-	DEFAULT_ROLES   = []string{}
-	JWT_ROLE_CLAIM  = "role"
-
-	// OAuth login
-	GOOGLE_CLIENT_ID       = ""
-	GOOGLE_CLIENT_SECRET   = ""
-	GITHUB_CLIENT_ID       = ""
-	GITHUB_CLIENT_SECRET   = ""
-	FACEBOOK_CLIENT_ID     = ""
-	FACEBOOK_CLIENT_SECRET = ""
-	TWITTER_CLIENT_ID      = ""
-	TWITTER_CLIENT_SECRET  = ""
-
-	// Org envs
-	ORGANIZATION_NAME = "Authorizer"
-	ORGANIZATION_LOGO = "https://authorizer.dev/images/logo.png"
-)

server/constants/cookie.go

@@ -0,0 +1,8 @@
+package constants
+
+const (
+	// AppCookieName is the name of the cookie that is used to store the application token
+	AppCookieName = "cookie"
+	// AdminCookieName is the name of the cookie that is used to store the admin token
+	AdminCookieName = "authorizer-admin"
+)

server/constants/db_types.go

@@ -0,0 +1,26 @@
+package constants
+
+const (
+	// DbTypePostgres is the postgres database type
+	DbTypePostgres = "postgres"
+	// DbTypeSqlite is the sqlite database type
+	DbTypeSqlite = "sqlite"
+	// DbTypeMysql is the mysql database type
+	DbTypeMysql = "mysql"
+	// DbTypeSqlserver is the sqlserver database type
+	DbTypeSqlserver = "sqlserver"
+	// DbTypeArangodb is the arangodb database type
+	DbTypeArangodb = "arangodb"
+	// DbTypeMongodb is the mongodb database type
+	DbTypeMongodb = "mongodb"
+	// DbTypeYugabyte is the yugabyte database type
+	DbTypeYugabyte = "yugabyte"
+	// DbTypeMariaDB is the mariadb database type
+	DbTypeMariaDB = "mariadb"
+	// DbTypeCassandra is the cassandra database type
+	DbTypeCassandraDB = "cassandradb"
+	// DbTypeScyllaDB is the scylla database type
+	DbTypeScyllaDB = "scylladb"
+	// DbTypeCockroachDB is the cockroach database type
+	DbTypeCockroachDB = "cockroachdb"
+)

server/constants/env.go

@@ -0,0 +1,128 @@
+package constants
+
+var VERSION = "0.0.1"
+
+const (
+	// TestEnv is used for testing
+	TestEnv = "test"
+	// EnvKeyEnv key for env variable ENV
+	EnvKeyEnv = "ENV"
+	// EnvKeyEnvPath key for cli arg variable ENV_PATH
+	EnvKeyEnvPath = "ENV_PATH"
+	// EnvKeyAuthorizerURL key for env variable AUTHORIZER_URL
+	EnvKeyAuthorizerURL = "AUTHORIZER_URL"
+	// EnvKeyPort key for env variable PORT
+	EnvKeyPort = "PORT"
+	// EnvKeyAccessTokenExpiryTime key for env variable ACCESS_TOKEN_EXPIRY_TIME
+	EnvKeyAccessTokenExpiryTime = "ACCESS_TOKEN_EXPIRY_TIME"
+	// EnvKeyAdminSecret key for env variable ADMIN_SECRET
+	EnvKeyAdminSecret = "ADMIN_SECRET"
+	// EnvKeyDatabaseType key for env variable DATABASE_TYPE
+	EnvKeyDatabaseType = "DATABASE_TYPE"
+	// EnvKeyDatabaseURL key for env variable DATABASE_URL
+	EnvKeyDatabaseURL = "DATABASE_URL"
+	// EnvKeyDatabaseName key for env variable DATABASE_NAME
+	EnvKeyDatabaseName = "DATABASE_NAME"
+	// EnvKeyDatabaseUsername key for env variable DATABASE_USERNAME
+	EnvKeyDatabaseUsername = "DATABASE_USERNAME"
+	// EnvKeyDatabasePassword key for env variable DATABASE_PASSWORD
+	EnvKeyDatabasePassword = "DATABASE_PASSWORD"
+	// EnvKeyDatabasePort key for env variable DATABASE_PORT
+	EnvKeyDatabasePort = "DATABASE_PORT"
+	// EnvKeyDatabaseHost key for env variable DATABASE_HOST
+	EnvKeyDatabaseHost = "DATABASE_HOST"
+	// EnvKeyDatabaseCert key for env variable DATABASE_CERT
+	EnvKeyDatabaseCert = "DATABASE_CERT"
+	// EnvKeyDatabaseCertKey key for env variable DATABASE_KEY
+	EnvKeyDatabaseCertKey = "DATABASE_CERT_KEY"
+	// EnvKeyDatabaseCACert key for env variable DATABASE_CA_CERT
+	EnvKeyDatabaseCACert = "DATABASE_CA_CERT"
+	// EnvKeySmtpHost key for env variable SMTP_HOST
+	EnvKeySmtpHost = "SMTP_HOST"
+	// EnvKeySmtpPort key for env variable SMTP_PORT
+	EnvKeySmtpPort = "SMTP_PORT"
+	// EnvKeySmtpUsername key for env variable SMTP_USERNAME
+	EnvKeySmtpUsername = "SMTP_USERNAME"
+	// EnvKeySmtpPassword key for env variable SMTP_PASSWORD
+	EnvKeySmtpPassword = "SMTP_PASSWORD"
+	// EnvKeySenderEmail key for env variable SENDER_EMAIL
+	EnvKeySenderEmail = "SENDER_EMAIL"
+	// EnvKeyJwtType key for env variable JWT_TYPE
+	EnvKeyJwtType = "JWT_TYPE"
+	// EnvKeyJwtSecret key for env variable JWT_SECRET
+	EnvKeyJwtSecret = "JWT_SECRET"
+	// EnvKeyJwtPrivateKey key for env variable JWT_PRIVATE_KEY
+	EnvKeyJwtPrivateKey = "JWT_PRIVATE_KEY"
+	// EnvKeyJwtPublicKey key for env variable JWT_PUBLIC_KEY
+	EnvKeyJwtPublicKey = "JWT_PUBLIC_KEY"
+	// EnvKeyAppURL key for env variable APP_URL
+	EnvKeyAppURL = "APP_URL"
+	// EnvKeyRedisURL key for env variable REDIS_URL
+	EnvKeyRedisURL = "REDIS_URL"
+	// EnvKeyResetPasswordURL key for env variable RESET_PASSWORD_URL
+	EnvKeyResetPasswordURL = "RESET_PASSWORD_URL"
+	// EnvKeyJwtRoleClaim key for env variable JWT_ROLE_CLAIM
+	EnvKeyJwtRoleClaim = "JWT_ROLE_CLAIM"
+	// EnvKeyGoogleClientID key for env variable GOOGLE_CLIENT_ID
+	EnvKeyGoogleClientID = "GOOGLE_CLIENT_ID"
+	// EnvKeyGoogleClientSecret key for env variable GOOGLE_CLIENT_SECRET
+	EnvKeyGoogleClientSecret = "GOOGLE_CLIENT_SECRET"
+	// EnvKeyGithubClientID key for env variable GITHUB_CLIENT_ID
+	EnvKeyGithubClientID = "GITHUB_CLIENT_ID"
+	// EnvKeyGithubClientSecret key for env variable GITHUB_CLIENT_SECRET
+	EnvKeyGithubClientSecret = "GITHUB_CLIENT_SECRET"
+	// EnvKeyFacebookClientID key for env variable FACEBOOK_CLIENT_ID
+	EnvKeyFacebookClientID = "FACEBOOK_CLIENT_ID"
+	// EnvKeyFacebookClientSecret key for env variable FACEBOOK_CLIENT_SECRET
+	EnvKeyFacebookClientSecret = "FACEBOOK_CLIENT_SECRET"
+	// EnvKeyLinkedinClientID key for env variable LINKEDIN_CLIENT_ID
+	EnvKeyLinkedInClientID = "LINKEDIN_CLIENT_ID"
+	// EnvKeyLinkedinClientSecret key for env variable LINKEDIN_CLIENT_SECRET
+	EnvKeyLinkedInClientSecret = "LINKEDIN_CLIENT_SECRET"
+	// EnvKeyAppleClientID key for env variable APPLE_CLIENT_ID
+	EnvKeyAppleClientID = "APPLE_CLIENT_ID"
+	// EnvKeyAppleClientSecret key for env variable APPLE_CLIENT_SECRET
+	EnvKeyAppleClientSecret = "APPLE_CLIENT_SECRET"
+	// EnvKeyOrganizationName key for env variable ORGANIZATION_NAME
+	EnvKeyOrganizationName = "ORGANIZATION_NAME"
+	// EnvKeyOrganizationLogo key for env variable ORGANIZATION_LOGO
+	EnvKeyOrganizationLogo = "ORGANIZATION_LOGO"
+	// EnvKeyCustomAccessTokenScript key for env variable CUSTOM_ACCESS_TOKEN_SCRIPT
+	EnvKeyCustomAccessTokenScript = "CUSTOM_ACCESS_TOKEN_SCRIPT"
+
+	// Not Exposed Keys
+	// EnvKeyClientID key for env variable CLIENT_ID
+	EnvKeyClientID = "CLIENT_ID"
+	// EnvKeyClientSecret key for env variable CLIENT_SECRET
+	EnvKeyClientSecret = "CLIENT_SECRET"
+	// EnvKeyEncryptionKey key for env variable ENCRYPTION_KEY
+	EnvKeyEncryptionKey = "ENCRYPTION_KEY"
+	// EnvKeyJWK key for env variable JWK
+	EnvKeyJWK = "JWK"
+
+	// Boolean variables
+	// EnvKeyIsProd key for env variable IS_PROD
+	EnvKeyIsProd = "IS_PROD"
+	// EnvKeyDisableEmailVerification key for env variable DISABLE_EMAIL_VERIFICATION
+	EnvKeyDisableEmailVerification = "DISABLE_EMAIL_VERIFICATION"
+	// EnvKeyDisableBasicAuthentication key for env variable DISABLE_BASIC_AUTH
+	EnvKeyDisableBasicAuthentication = "DISABLE_BASIC_AUTHENTICATION"
+	// EnvKeyDisableMagicLinkLogin key for env variable DISABLE_MAGIC_LINK_LOGIN
+	EnvKeyDisableMagicLinkLogin = "DISABLE_MAGIC_LINK_LOGIN"
+	// EnvKeyDisableLoginPage key for env variable DISABLE_LOGIN_PAGE
+	EnvKeyDisableLoginPage = "DISABLE_LOGIN_PAGE"
+	// EnvKeyDisableSignUp key for env variable DISABLE_SIGN_UP
+	EnvKeyDisableSignUp = "DISABLE_SIGN_UP"
+	// EnvKeyDisableRedisForEnv key for env variable DISABLE_REDIS_FOR_ENV
+	EnvKeyDisableRedisForEnv = "DISABLE_REDIS_FOR_ENV"
+
+	// Slice variables
+	// EnvKeyRoles key for env variable ROLES
+	EnvKeyRoles = "ROLES"
+	// EnvKeyProtectedRoles key for env variable PROTECTED_ROLES
+	EnvKeyProtectedRoles = "PROTECTED_ROLES"
+	// EnvKeyDefaultRoles key for env variable DEFAULT_ROLES
+	EnvKeyDefaultRoles = "DEFAULT_ROLES"
+	// EnvKeyAllowedOrigins key for env variable ALLOWED_ORIGINS
+	EnvKeyAllowedOrigins = "ALLOWED_ORIGINS"
+)

server/constants/oauth_info_urls.go

@@ -1,6 +1,6 @@
 package constants
 
-var (
+const (
 	// Ref: https://github.com/qor/auth/blob/master/providers/google/google.go
 	// deprecated and not used. instead we follow open id approach for google login
 	GoogleUserInfoURL = "https://www.googleapis.com/oauth2/v3/userinfo"
@@ -8,4 +8,7 @@ var (
 	FacebookUserInfoURL = "https://graph.facebook.com/me?fields=id,first_name,last_name,name,email,picture&access_token="
 	// 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"
+	// 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~))"
 )

server/constants/pagination.go

@@ -0,0 +1,4 @@
+package constants
+
+// DefaultLimit is the default limit for pagination
+var DefaultLimit = 10

server/constants/signup_methods.go

@@ -0,0 +1,18 @@
+package constants
+
+const (
+	// SignupMethodBasicAuth is the basic_auth signup method
+	SignupMethodBasicAuth = "basic_auth"
+	// SignupMethodMagicLinkLogin is the magic_link_login signup method
+	SignupMethodMagicLinkLogin = "magic_link_login"
+	// SignupMethodGoogle is the google signup method
+	SignupMethodGoogle = "google"
+	// SignupMethodGithub is the github signup method
+	SignupMethodGithub = "github"
+	// SignupMethodFacebook is the facebook signup method
+	SignupMethodFacebook = "facebook"
+	// SignupMethodLinkedin is the linkedin signup method
+	SignupMethodLinkedIn = "linkedin"
+	// SignupMethodApple is the apple signup method
+	SignupMethodApple = "apple"
+)

server/constants/token_types.go

@@ -0,0 +1,12 @@
+package constants
+
+const (
+	// TokenTypeRefreshToken is the refresh_token token type
+	TokenTypeRefreshToken = "refresh_token"
+	// TokenTypeAccessToken is the access_token token type
+	TokenTypeAccessToken = "access_token"
+	// TokenTypeIdentityToken is the identity_token token type
+	TokenTypeIdentityToken = "id_token"
+	// TokenTypeSessionToken is the session_token type used for browser session
+	TokenTypeSessionToken = "session_token"
+)

server/constants/verification_types.go

@@ -0,0 +1,12 @@
+package constants
+
+const (
+	// VerificationTypeBasicAuthSignup is the basic_auth_signup verification type
+	VerificationTypeBasicAuthSignup = "basic_auth_signup"
+	// VerificationTypeMagicLinkLogin is the magic_link_login verification type
+	VerificationTypeMagicLinkLogin = "magic_link_login"
+	// VerificationTypeUpdateEmail is the update_email verification type
+	VerificationTypeUpdateEmail = "update_email"
+	// VerificationTypeForgotPassword is the forgot_password verification type
+	VerificationTypeForgotPassword = "forgot_password"
+)

server/cookie/admin_cookie.go

@@ -0,0 +1,43 @@
+package cookie
+
+import (
+	"net/url"
+
+	"github.com/authorizerdev/authorizer/server/constants"
+	"github.com/authorizerdev/authorizer/server/parsers"
+	"github.com/gin-gonic/gin"
+)
+
+// SetAdminCookie sets the admin cookie in the response
+func SetAdminCookie(gc *gin.Context, token string) {
+	secure := true
+	httpOnly := true
+	hostname := parsers.GetHost(gc)
+	host, _ := parsers.GetHostParts(hostname)
+	gc.SetCookie(constants.AdminCookieName, token, 3600, "/", host, secure, httpOnly)
+}
+
+// GetAdminCookie gets the admin cookie from the request
+func GetAdminCookie(gc *gin.Context) (string, error) {
+	cookie, err := gc.Request.Cookie(constants.AdminCookieName)
+	if err != nil {
+		return "", err
+	}
+
+	// cookie escapes special characters like $
+	// hence we need to unescape before comparing
+	decodedValue, err := url.QueryUnescape(cookie.Value)
+	if err != nil {
+		return "", err
+	}
+	return decodedValue, nil
+}
+
+// DeleteAdminCookie sets the response cookie to empty
+func DeleteAdminCookie(gc *gin.Context) {
+	secure := true
+	httpOnly := true
+	hostname := parsers.GetHost(gc)
+	host, _ := parsers.GetHostParts(hostname)
+	gc.SetCookie(constants.AdminCookieName, "", -1, "/", host, secure, httpOnly)
+}

server/cookie/cookie.go

@@ -0,0 +1,64 @@
+package cookie
+
+import (
+	"net/http"
+	"net/url"
+
+	"github.com/authorizerdev/authorizer/server/constants"
+	"github.com/authorizerdev/authorizer/server/parsers"
+	"github.com/gin-gonic/gin"
+)
+
+// SetSession sets the session cookie in the response
+func SetSession(gc *gin.Context, sessionID string) {
+	secure := true
+	httpOnly := true
+	hostname := parsers.GetHost(gc)
+	host, _ := parsers.GetHostParts(hostname)
+	domain := parsers.GetDomainName(hostname)
+	if domain != "localhost" {
+		domain = "." + domain
+	}
+
+	// TODO allow configuring from dashboard
+	year := 60 * 60 * 24 * 365
+
+	gc.SetSameSite(http.SameSiteNoneMode)
+	gc.SetCookie(constants.AppCookieName+"_session", sessionID, year, "/", host, secure, httpOnly)
+	gc.SetCookie(constants.AppCookieName+"_session_domain", sessionID, year, "/", domain, secure, httpOnly)
+}
+
+// DeleteSession sets session cookies to expire
+func DeleteSession(gc *gin.Context) {
+	secure := true
+	httpOnly := true
+	hostname := parsers.GetHost(gc)
+	host, _ := parsers.GetHostParts(hostname)
+	domain := parsers.GetDomainName(hostname)
+	if domain != "localhost" {
+		domain = "." + domain
+	}
+
+	gc.SetSameSite(http.SameSiteNoneMode)
+	gc.SetCookie(constants.AppCookieName+"_session", "", -1, "/", host, secure, httpOnly)
+	gc.SetCookie(constants.AppCookieName+"_session_domain", "", -1, "/", domain, secure, httpOnly)
+}
+
+// GetSession gets the session cookie from context
+func GetSession(gc *gin.Context) (string, error) {
+	var cookie *http.Cookie
+	var err error
+	cookie, err = gc.Request.Cookie(constants.AppCookieName + "_session")
+	if err != nil {
+		cookie, err = gc.Request.Cookie(constants.AppCookieName + "_session_domain")
+		if err != nil {
+			return "", err
+		}
+	}
+
+	decodedValue, err := url.PathUnescape(cookie.Value)
+	if err != nil {
+		return "", err
+	}
+	return decodedValue, nil
+}

server/crypto/aes.go

@@ -0,0 +1,124 @@
+package crypto
+
+import (
+	"crypto/aes"
+	"crypto/cipher"
+	"crypto/rand"
+	"io"
+
+	"github.com/authorizerdev/authorizer/server/constants"
+	"github.com/authorizerdev/authorizer/server/memorystore"
+)
+
+var bytes = []byte{35, 46, 57, 24, 85, 35, 24, 74, 87, 35, 88, 98, 66, 32, 14, 0o5}
+
+// EncryptAES method is to encrypt or hide any classified text
+func EncryptAES(text string) (string, error) {
+	k, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyEncryptionKey)
+	if err != nil {
+		return "", err
+	}
+	key := []byte(k)
+	block, err := aes.NewCipher(key)
+	if err != nil {
+		return "", err
+	}
+	plainText := []byte(text)
+	cfb := cipher.NewCFBEncrypter(block, bytes)
+	cipherText := make([]byte, len(plainText))
+	cfb.XORKeyStream(cipherText, plainText)
+	return EncryptB64(string(cipherText)), nil
+}
+
+// DecryptAES method is to extract back the encrypted text
+func DecryptAES(text string) (string, error) {
+	k, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyEncryptionKey)
+	if err != nil {
+		return "", err
+	}
+	key := []byte(k)
+	block, err := aes.NewCipher(key)
+	if err != nil {
+		return "", err
+	}
+	cipherText, err := DecryptB64(text)
+	if err != nil {
+		return "", err
+	}
+	cfb := cipher.NewCFBDecrypter(block, bytes)
+	plainText := make([]byte, len(cipherText))
+	cfb.XORKeyStream(plainText, []byte(cipherText))
+	return string(plainText), nil
+}
+
+// EncryptAESEnv encrypts data using AES algorithm
+// kept for the backward compatibility of env data encryption
+func EncryptAESEnv(text []byte) ([]byte, error) {
+	var res []byte
+	k, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyEncryptionKey)
+	if err != nil {
+		return res, err
+	}
+	key := []byte(k)
+	c, err := aes.NewCipher(key)
+	if err != nil {
+		return res, err
+	}
+
+	// gcm or Galois/Counter Mode, is a mode of operation
+	// for symmetric key cryptographic block ciphers
+	// - https://en.wikipedia.org/wiki/Galois/Counter_Mode
+	gcm, err := cipher.NewGCM(c)
+	if err != nil {
+		return res, err
+	}
+
+	// creates a new byte array the size of the nonce
+	// which must be passed to Seal
+	nonce := make([]byte, gcm.NonceSize())
+	// populates our nonce with a cryptographically secure
+	// random sequence
+	if _, err = io.ReadFull(rand.Reader, nonce); err != nil {
+		return res, err
+	}
+
+	// here we encrypt our text using the Seal function
+	// Seal encrypts and authenticates plaintext, authenticates the
+	// additional data and appends the result to dst, returning the updated
+	// slice. The nonce must be NonceSize() bytes long and unique for all
+	// time, for a given key.
+	return gcm.Seal(nonce, nonce, text, nil), nil
+}
+
+// DecryptAES decrypts data using AES algorithm
+// Kept for the backward compatibility of env data decryption
+func DecryptAESEnv(ciphertext []byte) ([]byte, error) {
+	var res []byte
+	k, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyEncryptionKey)
+	if err != nil {
+		return res, err
+	}
+	key := []byte(k)
+	c, err := aes.NewCipher(key)
+	if err != nil {
+		return res, err
+	}
+
+	gcm, err := cipher.NewGCM(c)
+	if err != nil {
+		return res, err
+	}
+
+	nonceSize := gcm.NonceSize()
+	if len(ciphertext) < nonceSize {
+		return res, err
+	}
+
+	nonce, ciphertext := ciphertext[:nonceSize], ciphertext[nonceSize:]
+	plaintext, err := gcm.Open(nil, nonce, ciphertext, nil)
+	if err != nil {
+		return res, err
+	}
+
+	return plaintext, nil
+}