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 ", + "license": "GPL-3.0-or-later", + "engines": { + "node": ">=10" + }, + "scripts": { + "start": "webpack serve --open --config config/webpack.dev.js", + "build": "webpack --config config/webpack.prod.js" + }, + "devDependencies": { + "@babel/core": "^7.18.2", + "@babel/preset-env": "^7.18.2", + "@babel/preset-react": "^7.17.12", + "babel-loader": "^8.2.5", + "html-webpack-plugin": "^5.5.0", + "webpack": "^5.73.0", + "webpack-cli": "^4.9.2", + "webpack-dev-server": "^4.9.2", + "webpack-merge": "^5.8.0" + }, + "dependencies": { + "@auth0/auth0-react": "^1.10.2", + "prop-types": "^15.8.1", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0" + } +} diff --git a/auth0-blog/public/index.html b/auth0-blog/public/index.html new file mode 100644 index 0000000..965d3b5 --- /dev/null +++ b/auth0-blog/public/index.html @@ -0,0 +1,10 @@ + + + + + React Example + + +
+ +