From a258d0ae521d2e59b2815036e077436f471b82dc Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <15830206+abhinavkrin@users.noreply.github.com>
Date: Sun, 6 Feb 2022 17:02:17 +0530
Subject: [PATCH 1/4] add auth0 - early
---
app/.env.local.sample | 27 +
app/components/auth/auth0/index.js | 9 +
app/components/auth/auth0/lib/functions.js | 47 +
.../styles/Auth0AuthMenuButton.module.css | 45 +
.../auth/auth0/ui/Auth0AuthMenuButton.js | 46 +
app/components/auth/auth0/ui/Auth0UserInfo.js | 43 +
app/components/layout.js | 3 +-
app/components/menubar.js | 4 +-
app/package-lock.json | 17461 ++++++++++++++++
app/package.json | 4 +-
app/pages/_app.js | 12 +-
app/pages/api/auth0/[...auth0].js | 17 +
app/pages/examples/auth0-protected-page.js | 27 +
app/pages/examples/auth0.js | 5 +
app/pages/index.js | 3 +-
15 files changed, 17740 insertions(+), 13 deletions(-)
create mode 100644 app/components/auth/auth0/index.js
create mode 100644 app/components/auth/auth0/lib/functions.js
create mode 100644 app/components/auth/auth0/styles/Auth0AuthMenuButton.module.css
create mode 100644 app/components/auth/auth0/ui/Auth0AuthMenuButton.js
create mode 100644 app/components/auth/auth0/ui/Auth0UserInfo.js
create mode 100644 app/package-lock.json
create mode 100644 app/pages/api/auth0/[...auth0].js
create mode 100644 app/pages/examples/auth0-protected-page.js
create mode 100644 app/pages/examples/auth0.js
diff --git a/app/.env.local.sample b/app/.env.local.sample
index 7cfbb2f4..504f1ef2 100644
--- a/app/.env.local.sample
+++ b/app/.env.local.sample
@@ -1,3 +1,4 @@
+##### BEGIN: Environment variables for firebase config. #####
# Environment variables for firebase-admin
GOOGLE_CREDS_PATH=required, path to your service account json file that you downloaded from firebase console.
@@ -19,3 +20,29 @@ NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
# for cookies signing
COOKIE_SECRET_CURRENT=
COOKIE_SECRET_PREVIOUS=
+
+##### END: Environment variables for firebase config. #####
+
+#### BEGIN: Environment variables for auth0 config ####
+
+# A long, secret value used to encrypt the session cookie
+AUTH0_SECRET='a_long_random_string'
+# The base url of your application
+AUTH0_BASE_URL='http://localhost:3000'
+# The url of your Auth0 tenant domain
+AUTH0_ISSUER_BASE_URL='https://sample_app.us.auth0.com'
+# Your Auth0 application's Client ID
+AUTH0_CLIENT_ID='your client id'
+# Your Auth0 application's Client Secret
+AUTH0_CLIENT_SECRET='your client secret'
+# API route for auth0 login (do not not change, since we have used custom routes for auth0)
+NEXT_PUBLIC_AUTH0_LOGIN='/api/auth0/login'
+# API route for auth0 profile (do not not change, since we have used custom routes for auth0)
+NEXT_PUBLIC_AUTH0_PROFILE='/api/auth0/me'
+# API route for auth0 callback (do not not change, since we have used custom routes for auth0)
+AUTH0_CALLBACK='/api/auth0/callback'
+# URL to redirect after logout (set a value to override default). Must be present in list of logout urls in auth0 dashboard.
+AUTH0_POST_LOGOUT_REDIRECT='/'
+# For more environment variables visit https://auth0.github.io/nextjs-auth0/modules/config.html
+
+#### END: Environment variables for auth0 config ####
diff --git a/app/components/auth/auth0/index.js b/app/components/auth/auth0/index.js
new file mode 100644
index 00000000..e5815de7
--- /dev/null
+++ b/app/components/auth/auth0/index.js
@@ -0,0 +1,9 @@
+import Auth0AuthMenuButtonModule from './ui/Auth0AuthMenuButton';
+import Auth0UserInfoModule from './ui/Auth0UserInfo';
+import functions from './lib/functions';
+
+export const Auth0AuthMenuButton = Auth0AuthMenuButtonModule;
+export const Auth0AuthUserInfo = Auth0UserInfoModule;
+
+export const getAuth0LoginURL = functions.getAuth0LoginURL;
+export const getAuth0LogoutURL = functions.getAuth0LogoutURL;
diff --git a/app/components/auth/auth0/lib/functions.js b/app/components/auth/auth0/lib/functions.js
new file mode 100644
index 00000000..61c5abed
--- /dev/null
+++ b/app/components/auth/auth0/lib/functions.js
@@ -0,0 +1,47 @@
+import urlJoin from 'url-join';
+const prepareUrl = (url,returnTo=null,redirectToThisPage=false) => {
+ let returnUrl = urlJoin(process.env.AUTH0_BASE_URL || '/', url);
+ if(typeof window !== 'undefined'){
+ if(returnTo){
+ return returnUrl + '?returnTo='+encodeURIComponent(returnTo);
+ } else if(redirectToThisPage){
+ return returnUrl + '?returnTo='+encodeURIComponent(window.location.href);
+ }
+ }
+ return returnUrl;
+}
+
+/**
+ *
+ * @param {String} returnTo
+ * URL to redirect to after logout.
+ * @param {boolean} redirectToThisPage
+ * Whether to redirect to the url where the function is called.
+ * @returns logoutUrl
+ */
+export const getAuth0LoginURL = ({
+ returnTo = null,
+ redirectToThisPage = false
+} = {}) => {
+ return prepareUrl('/api/auth0/login',returnTo,redirectToThisPage)
+};
+
+/**
+ *
+ * @param {String} returnTo
+ * URL to redirect to after logout. The url passed must be added in logout urls list auth0 dashboard.
+ * @param {boolean} redirectToThisPage
+ * Whether to redirect to the url where the function is called. The url must be added in logout urls list in auth0 dashboard.
+ * @returns logoutUrl
+ */
+export const getAuth0LogoutURL = ({
+ returnTo = null,
+ redirectToThisPage = false
+} = {}) => {
+ return prepareUrl('/api/auth0/logout',returnTo,redirectToThisPage)
+};
+
+export default {
+ getAuth0LoginURL,
+ getAuth0LogoutURL
+};
diff --git a/app/components/auth/auth0/styles/Auth0AuthMenuButton.module.css b/app/components/auth/auth0/styles/Auth0AuthMenuButton.module.css
new file mode 100644
index 00000000..049c784c
--- /dev/null
+++ b/app/components/auth/auth0/styles/Auth0AuthMenuButton.module.css
@@ -0,0 +1,45 @@
+.authDialogWrapper {
+ position: relative;
+}
+.authContainer {
+ display: block;
+ position: absolute;
+ right: 8px;
+ top: 62px;
+ width: 354px;
+ max-height: -webkit-calc(100vh - 62px - 100px);
+ max-height: calc(100vh - 62px - 100px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ border-radius: 8px;
+ margin-left: 12px;
+ z-index: 991;
+ line-height: normal;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-color: rgba(0,0,0,.2);
+ color: #000;
+ -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+ box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+ -webkit-user-select: text;
+ user-select: text;
+}
+
+.avatar {
+ background: var(--bs-gray-300);
+ border-radius: 50%;
+ width: 42px;
+ height: 42px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.avatarButton {
+ background: none;
+ border: none;
+}
+
+.avatarButton:focus {
+ outline: none;
+}
diff --git a/app/components/auth/auth0/ui/Auth0AuthMenuButton.js b/app/components/auth/auth0/ui/Auth0AuthMenuButton.js
new file mode 100644
index 00000000..fb2eb3de
--- /dev/null
+++ b/app/components/auth/auth0/ui/Auth0AuthMenuButton.js
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { NoUserAvatar } from "../../NoUserAvatar";
+import styles from "../styles/Auth0AuthMenuButton.module.css";
+import { useUser } from "@auth0/nextjs-auth0";
+import Auth0UserInfo from "./Auth0UserInfo";
+import { getAuth0LoginURL } from "../lib/functions";
+
+export default function Auth0AuthMenuButton({}){
+ const {user} = useUser();
+ const [isOpen,setOpen] = useState(false);
+ return (
+
+
+ {user?
+
+ :
+
+
+
+ }
+
+ { user && isOpen &&
+
+ }
+
+
+ {
+ user.picture ?
+
+ :
+
+ }
+
+
+ {user.name}
+
+
+ {user.email}
+
+
Loading...
;
+ if (error) return {error.message}
;
+ if (user) {
+ return (
+
+ Welcome {user.name}!
Logout
+
Loading...
;
+ if (error) return {error.message}
;
+ if (user) {
+ return (
+
+ Welcome {user.name}!
Logout
+