-
- );
- }
-}
+const AppContainer = (props) => (
+
-
-
-
-
+
+);
function mapStateToProps(state) {
return {
diff --git a/react-app/src/containers/RequireAuthentication.js b/react-app/src/containers/RequireAuthentication.js
new file mode 100644
index 0000000..84fadcb
--- /dev/null
+++ b/react-app/src/containers/RequireAuthentication.js
@@ -0,0 +1,36 @@
+/*
+ * This HOC can be used to wrap components so that if they are rendered without authentication,
+ * they redirect to '/login' first and then come back.
+ */
+
+import React from 'react';
+import { Redirect, withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { isLoaded } from '../util/loadingObject';
+
+function mapStateToProps(state) {
+ return {
+ user: state.auth
+ };
+}
+
+export default function RequireAuthentication(Component) {
+ const wrapper = props => {
+ if (isLoaded(props.user)) {
+ return
+
+
+
+ CS3214 Demo App
-
- This small React {React.version} app
+let HomePage = (props) => (
+
+ This small React {React.version} app
shows how to use the JWT authentication facilities of your
server in a progressive single-page web application.
CS3214 Demo App
+
+
Route not found Error
+ (Route not found Error
Something went wrong: {window.location.pathname} could not be found!
{/* JSON.stringify(props) */}
- Welcome to a private page
-
- You have successfully authenticated.
-
-
- This page is "private" only inasmuch as the front-end does not
- display it to unauthenticated users. In a fully-fledged app,
- this page would now perform API requests that require authentication.
-
- Welcome to a private page
+
+ You have successfully authenticated as user {user.sub}.
+ Your token was issued at {new Date(user.iat*1000).toString()},
+ it expires {new Date(user.exp*1000).toString()}
+
+
+ This page is "private" only inasmuch as the front-end does not
+ display it to unauthenticated users. In a fully-fledged app,
+ this page would now perform API requests that require authentication.
+
+ Welcome to a public page
-
- This public page is accessible to anyone.
+const PublicPage = () => (
+
+ );
- }
-}
+ );
-export default PublicPage
+export default PublicPage;
\ No newline at end of file
diff --git a/react-app/src/reducers/auth.js b/react-app/src/reducers/auth.js
index 2064ab0..87b7094 100644
--- a/react-app/src/reducers/auth.js
+++ b/react-app/src/reducers/auth.js
@@ -20,7 +20,7 @@ const checkloginHandler = asyncHandler('CHECKLOGIN', initialState);
export default function(state = initialState, action) {
let newState;
- if (action.type === 'LOGIN:OK') {
+ if (action.type.startsWith('LOGIN:')) {
newState = loginHandler(state, action);
}
if (action.type === 'CHECKLOGIN:OK') {
diff --git a/react-app/src/store.js b/react-app/src/store.js
index 70c8c9b..f23e5f6 100644
--- a/react-app/src/store.js
+++ b/react-app/src/store.js
@@ -3,9 +3,10 @@ import thunk from 'redux-thunk';
import rootReducer from './reducers/root';
-const createStoreWithMiddleware = compose(
- applyMiddleware(thunk),
- window.devToolsExtension ? window.devToolsExtension() : f => f
+// https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const createStoreWithMiddleware = composeEnhancers(
+ applyMiddleware(thunk)
)(createStore);
const store = createStoreWithMiddleware(rootReducer);
Welcome to a public page
+
+ This public page is accessible to anyone.
-