Amendments for gh-pages example

README.md

@@ -67,12 +67,15 @@ class Example extends Component {
 }
 ```
 
-See the [Example](./example) for an application of this component. This showcases a few different use cases, and you can see this in action whilst hooked up to a test Auth0 server.
+See the [Examples](./example) for an application of this component. This showcases a few different use cases all in one single page application, and you can see this in action whilst hooked up to a test Auth0 server.
 
-Build the Example with `npm install` and then `npm start` to start the development server at [http://localhost:3000](http://localhost:3000).
+Build the Examples with `npm install` and then `npm start` to start the development server at [http://localhost:3000](http://localhost:3000).
 
 Or view the online example at [https://darylbuckle.github.io/react-oauth2-authcode-provider](https://darylbuckle.github.io/react-oauth2-authcode-provider).
 
+A simple example that always requires authentication can also be found at [https://github.com/darylbuckle/react-oauth2-authcode-provider-test](https://github.com/darylbuckle/react-oauth2-authcode-provider-test).
+
+
 
 ## Props
 
@@ -86,6 +89,7 @@ Or view the online example at [https://darylbuckle.github.io/react-oauth2-authco
 |    returnTo | string  | *current path*  | false | Once a token has been retrieved this is the path to redirect back to. If not set it will redirect back to the current path. |
 |    history | ReactRouterHistory  |  | false | React router history object. If set this will be used for post authentication redirects and removing the code parameter. If not provided the page will be reloaded to remove the code parameter and redirect. |
 |    storagePrefix | string  | ''  | false | Used if you are authenticating with multiple oauth2 servers, you can store multiple access tokens. The second/third/etc instance should have a unique prefixes. |
+|    cookiePath | string  | '/'  | false | Determines the Path for cookies. If hosting in a subdirectory you should set this to the subdirectory path (/subdriectory). |
 |    onGetAuthCode | func  |  | false | A call back function that is called before being redirecting to the authorization endpoint. |
 |    onReceiveAuthCode | func  |  | false | A call back function that is called when redirected back to the application with the Code parameter populated. |
 |    onTokenObtained | func  |  | false | A call back function that is called after retrieving an access token. |

example/README.md

@@ -3,3 +3,74 @@ This example was bootstrapped with [Create React App](https://github.com/faceboo
 It is linked to the react-oauth2-authcode-provider package in the parent directory for development purposes.
 
 You can run `npm install` and then `npm start` to test your package.
+
+#### Deploying to a Sub-directory
+
+When deploying the examples to a subdirectory change the following;
+
+index.tsx
+
+```javascript
+ReactDOM.render(<Router basename={'react-oauth2-authcode-provider'}><App /></Router>, document.getElementById('root'))
+```
+
+App.tsx
+
+```javascript
+const authProps: AuthCodeProps = {
+    authUrl: 'https://dev-emf33n24.eu.auth0.com/authorize',
+    callBackPath: '/react-oauth2-authcode-provider/',
+    tokenUrl: 'https://dev-emf33n24.eu.auth0.com/oauth/token',
+    logoutUrl: 'https://dev-emf33n24.eu.auth0.com/v2/logout',
+    logoutCallBackPath: '/react-oauth2-authcode-provider/',
+```
+
+```javascript
+<AuthCodeProvider
+    authenticationProps={authProps}
+    history={props.history}
+    authenticationRequired={authRequired}
+    doLogout={doLogout}
+    enableDebugLog={true}
+    onTokenObtained={(data) => setTokenLoaded(data)}
+    onTokenObtainedError={(error) => { setTokenLoaded(error)}}
+    returnTo={'/'}
+    cookiePath={'/react-oauth2-authcode-provider'}
+>
+```
+
+```javascript
+<AuthCodeProvider
+    authenticationProps={authProps}
+    history={props.history}
+    authenticationRequired={false}
+    enableDebugLog={true}
+    onTokenObtained={(data) => setTokenLoaded(data)}
+    onTokenObtainedError={(error) => { setTokenLoaded(error)}}
+    returnTo={'/functions'}
+    cookiePath={'/react-oauth2-authcode-provider'}
+>
+```
+
+```javascript
+<AuthCodeProvider
+    authenticationProps={authProps}
+    history={props.history}
+    authenticationRequired={true}
+    doLogout={doLogout}
+    enableDebugLog={true}
+    onTokenObtained={(data) => setTokenLoaded(data)}
+    onTokenObtainedError={(error) => setTokenLoaded(error)}
+    returnTo={'/authrequired'}
+    cookiePath={'/react-oauth2-authcode-provider'}
+>
+```
+
+FunctionsPage.tsx
+
+```javascript
+      <div className='mt-3 mb-3'>x
+        <button className='btn btn-primary mr-3' onClick={() => AuthCodeFunctions.doAuthorizationCodeFlow(props.authProps, '/functions')}>Start Authorization Code Flow</button>
+        <button className='btn btn-primary mr-3' onClick={() => AuthCodeFunctions.doLogoutFlow(props.authProps)}>Start Log out Flow</button>
+      </div>
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-oauth2-authcode-provider",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A component that can wrap react single page applications to implement authentication with OAuth2 Authorization Code Flow.",
   "author": "DarylBuckle",
   "license": "MIT",

src/AuthCodeFunctions.tsx

@@ -96,7 +96,6 @@ export function doAuthorizationCodeFlow(
   cookies.remove(storagePrefix + 'access_token')
   cookies.remove(storagePrefix + 'refresh_token')
   localStorage.removeItem(storagePrefix + 'id_token')
-
   if (
     !isretry ||
     !localStorage.getItem(storagePrefix + 'authcode_authentication_redirect')
@@ -208,7 +207,14 @@ export function buildRedirectUri(path: string): string {
   if (!pathMod) {
     pathMod = ''
   }
-  return location.protocol + '//' + location.host + pathMod
+  if (
+    pathMod.toUpperCase().includes('HTTP://') ||
+    pathMod.toUpperCase().includes('HTTPS://')
+  ) {
+    return pathMod
+  } else {
+    return location.protocol + '//' + location.host + pathMod
+  }
 }
 
 /**

src/AuthCodeProvider.tsx

@@ -19,6 +19,7 @@ interface IAuthCodeProviderProps {
   returnTo?: string
   history: any
   storagePrefix: string
+  cookiePath: string
   onGetAuthCode?: () => void
   onReceiveAuthCode?: (authcode: string) => void
   onTokenObtained?: (data: any) => void
@@ -52,6 +53,7 @@ class AuthCodeProvider extends React.Component<
     authenticationRequired: true,
     doLogout: false,
     storagePrefix: '',
+    cookiePath: '/',
     enableDebugLog: false,
     signInText: 'Signing you in...',
     signOutText: 'Signing you out...',
@@ -97,6 +99,11 @@ class AuthCodeProvider extends React.Component<
      */
     storagePrefix: PropTypes.string,
 
+    /**
+     * Determines the Path for cookies. If hosting in a subdirectory you should set this to the subdirectory path (/subdriectory)
+     */
+    cookiePath: PropTypes.string,
+
     /**
      * A call back function that is called before being redirecting to the authorization endpoint.
      */
@@ -525,7 +532,7 @@ class AuthCodeProvider extends React.Component<
     cookies.set(
       this.props.storagePrefix + 'access_token',
       response.access_token,
-      { path: '/' }
+      { path: this.props.cookiePath }
     )
     this.debugit('New Access Token: ' + response.access_token)
 
@@ -536,7 +543,7 @@ class AuthCodeProvider extends React.Component<
     }
     if (refreshToken) {
       cookies.set(this.props.storagePrefix + 'refresh_token', refreshToken, {
-        path: '/',
+        path: this.props.cookiePath,
         expires: new Date(now.setMonth(now.getMonth() + 4))
       })
       this.debugit('New Refresh Token: ' + response.access_token)