diff --git a/auth0-blog/.babelrc b/auth0-blog/.babelrc
new file mode 100644
index 0000000..4f06b0c
--- /dev/null
+++ b/auth0-blog/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}
diff --git a/auth0-blog/.gitignore b/auth0-blog/.gitignore
new file mode 100644
index 0000000..f992571
--- /dev/null
+++ b/auth0-blog/.gitignore
@@ -0,0 +1,108 @@
+# Others
+package-lock.json
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/auth0-blog/README.md b/auth0-blog/README.md
new file mode 100644
index 0000000..80c619a
--- /dev/null
+++ b/auth0-blog/README.md
@@ -0,0 +1,15 @@
+# Auth0 Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [Auth0 with React}(https://auth0.com/blog/complete-guide-to-react-user-authentication/)
diff --git a/auth0-blog/app/app.jsx b/auth0-blog/app/app.jsx
new file mode 100644
index 0000000..39da3a3
--- /dev/null
+++ b/auth0-blog/app/app.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import NavBar from "./components/nav-bar";
+import Home from './pages/home';
+export default function App() {
+ return (
+
+
+
+
Auth0 with React.js
+
+
+
+ );
+}
diff --git a/auth0-blog/app/auth/auth0-provider-with-history.jsx b/auth0-blog/app/auth/auth0-provider-with-history.jsx
new file mode 100644
index 0000000..f715ed8
--- /dev/null
+++ b/auth0-blog/app/auth/auth0-provider-with-history.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+
+const Auth0ProviderWithNavigate = ({ children }) => {
+ const domain = 'swingbe.eu.auth0.com';
+ const clientId = 'OySbj7SzpZeKxKGm8lGDNZW0pcGQBiJr';
+ const navigate = useNavigate();
+ const onRedirectCallback = (appState) => {
+ navigate.push(appState?.returnTo || window.location.pathname);
+ };
+ return (
+
+ {children}
+
+ );
+};
+
+export default Auth0ProviderWithNavigate;
diff --git a/auth0-blog/app/components/auth-nav.jsx b/auth0-blog/app/components/auth-nav.jsx
new file mode 100644
index 0000000..c2f90c2
--- /dev/null
+++ b/auth0-blog/app/components/auth-nav.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import AuthenticationButton from './authentication-button';
+
+const AuthNav = () => (
+
+);
+
+export default AuthNav;
diff --git a/auth0-blog/app/components/authentication-button.jsx b/auth0-blog/app/components/authentication-button.jsx
new file mode 100644
index 0000000..bc537fe
--- /dev/null
+++ b/auth0-blog/app/components/authentication-button.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import LoginButton from './login-button';
+import LogoutButton from './logout-button';
+
+import { useAuth0 } from '@auth0/auth0-react';
+
+const AuthenticationButton = () => {
+ const { isAuthenticated } = useAuth0();
+
+ return isAuthenticated ? : ;
+};
+
+export default AuthenticationButton;
diff --git a/auth0-blog/app/components/hello.jsx b/auth0-blog/app/components/hello.jsx
new file mode 100644
index 0000000..2904898
--- /dev/null
+++ b/auth0-blog/app/components/hello.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+ return (
+ <>
+ {msg}
+ >
+ );
+}
+
+export default Hello
+
+Hello.propTypes = {
+ msg: PropTypes.string,
+};
diff --git a/auth0-blog/app/components/login-button.jsx b/auth0-blog/app/components/login-button.jsx
new file mode 100644
index 0000000..23c0a24
--- /dev/null
+++ b/auth0-blog/app/components/login-button.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const LoginButton = () => {
+ const { loginWithRedirect } = useAuth0();
+ return (
+
+ );
+};
+
+export default LoginButton;
diff --git a/auth0-blog/app/components/logout-button.jsx b/auth0-blog/app/components/logout-button.jsx
new file mode 100644
index 0000000..622a452
--- /dev/null
+++ b/auth0-blog/app/components/logout-button.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const LogoutButton = () => {
+ const { logout } = useAuth0();
+ return (
+
+ );
+};
+
+export default LogoutButton;
diff --git a/auth0-blog/app/components/main-nav.jsx b/auth0-blog/app/components/main-nav.jsx
new file mode 100644
index 0000000..1fff86c
--- /dev/null
+++ b/auth0-blog/app/components/main-nav.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+const MainNav = () => (
+
+ MainNav loading...
+
+);
+
+export default MainNav;
diff --git a/auth0-blog/app/components/nav-bar.jsx b/auth0-blog/app/components/nav-bar.jsx
new file mode 100644
index 0000000..93333bc
--- /dev/null
+++ b/auth0-blog/app/components/nav-bar.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import MainNav from './main-nav';
+import AuthNav from './auth-nav';
+
+const NavBar = () => {
+ return (
+
+ );
+};
+
+export default NavBar;
diff --git a/auth0-blog/app/components/signup-button.jsx b/auth0-blog/app/components/signup-button.jsx
new file mode 100644
index 0000000..52203d6
--- /dev/null
+++ b/auth0-blog/app/components/signup-button.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const SignupButton = () => {
+ const { loginWithRedirect } = useAuth0();
+ return (
+
+ );
+};
+
+export default SignupButton;
diff --git a/auth0-blog/app/index.jsx b/auth0-blog/app/index.jsx
new file mode 100644
index 0000000..303b3e3
--- /dev/null
+++ b/auth0-blog/app/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+import { BrowserRouter as Router } from "react-router-dom";
+import Auth0ProviderWithHistory from './auth/auth0-provider-with-history';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+ console.log('development mode');
+}
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(
+
+
+
+
+ ,
+);
diff --git a/auth0-blog/app/pages/home.jsx b/auth0-blog/app/pages/home.jsx
new file mode 100644
index 0000000..16550ae
--- /dev/null
+++ b/auth0-blog/app/pages/home.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Hello from '../components/hello';
+
+const Home = () => {
+ return (
+ <>
+ Home
+ (React.js Lambda Function Component)
+
+ >
+ );
+}
+
+export default Home
diff --git a/auth0-blog/config/webpack.common.js b/auth0-blog/config/webpack.common.js
new file mode 100644
index 0000000..f7b5519
--- /dev/null
+++ b/auth0-blog/config/webpack.common.js
@@ -0,0 +1,36 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+ //bundle *.js from this entry point
+ entry: path.resolve(__dirname, '../app/index.jsx'),
+ //create output file to be linked to index.html
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, '../dist'),
+ clean: true,
+ },
+ module: {
+ rules: [
+ {
+ //test all *.js using babel-loader
+ //test all *.jsx (e.g. React.js) using babel-loader
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ include: path.resolve(__dirname, '../app'),
+ use: ['babel-loader'],
+ }
+ ]
+ },
+ resolve: {
+ extensions: ['*', '.js', '.jsx'],
+ },
+ plugins: [
+ // create a plugin instance so that you can use it several times anywhere
+ new HtmlWebpackPlugin({
+ title: 'Production',
+ template: path.resolve(__dirname, "../public/index.html")
+ }),
+ ],
+};
diff --git a/auth0-blog/config/webpack.dev.js b/auth0-blog/config/webpack.dev.js
new file mode 100644
index 0000000..b403670
--- /dev/null
+++ b/auth0-blog/config/webpack.dev.js
@@ -0,0 +1,15 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+ //set development mode
+ mode: 'development',
+ //enable strong source mapping
+ devtool: 'inline-source-map',
+ devServer: {
+ static: path.resolve(__dirname, '../dist'),
+ port: 4040,
+ },
+});
diff --git a/auth0-blog/config/webpack.prod.js b/auth0-blog/config/webpack.prod.js
new file mode 100644
index 0000000..e47c24a
--- /dev/null
+++ b/auth0-blog/config/webpack.prod.js
@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+ mode: 'production',
+ //source maps encouraged in production
+ //choose mapping with fairly quick build speed like source-map
+ devtool: 'source-map',
+});
diff --git a/auth0-blog/package.json b/auth0-blog/package.json
new file mode 100644
index 0000000..d342f1e
--- /dev/null
+++ b/auth0-blog/package.json
@@ -0,0 +1,39 @@
+{
+ "private": true,
+ "name": "auth0-example",
+ "description": "Auth0 example",
+ "version": "0.0.1",
+ "main": "index.js",
+ "keywords": [
+ "react",
+ "webpack",
+ "auth0"
+ ],
+ "author": "Software Ingenieur Begerad