Some component that needs an authenticated user...
- }
+```js
+function ProtectedComponent() {
+ return (
+ (http://about.uber5.com/)",
"license": "MIT",
+ "homepage": "https://github.com/Uber5/react-u5auth/tree/react-pkce",
"repository": {
"type": "git",
"url": "https://github.com/Uber5/react-u5auth.git"
},
"dependencies": {},
"peerDependencies": {
- "react": "^15.0.0 || ^16.0.0",
- "prop-types": "^15.0.0"
+ "react": "^16.8.0"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
@@ -32,11 +33,9 @@
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
+ "react-scripts": "^3.2.0",
"rimraf": "2.5.4",
- "source-map-support": "0.4.5",
- "webpack": "^4.39.2",
- "webpack-cli": "^3.3.6",
- "webpack-dev-server": "^3.8.0"
+ "source-map-support": "0.4.5"
},
"babel": {
"presets": [
@@ -46,5 +45,17 @@
"plugins": [
"@babel/plugin-proposal-class-properties"
]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
}
}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..c2c86b8
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..134a861
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,43 @@
+
+
+
+ PKCE Demo App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/public/logo192.png b/public/logo192.png
new file mode 100644
index 0000000..fa313ab
Binary files /dev/null and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
new file mode 100644
index 0000000..bd5d4b5
Binary files /dev/null and b/public/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..33c9a07
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "React PKCE Demo",
+ "name": "React PKCE (OAuth2) App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..01b0f9a
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/sample/dist/index.html b/sample/dist/index.html
deleted file mode 100644
index b2c7812..0000000
--- a/sample/dist/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
- React U5Auth Demo
-
-
-
-
-
-
-
diff --git a/sample/index.js b/sample/index.js
deleted file mode 100644
index 21b72bd..0000000
--- a/sample/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { AuthContext, authenticated, getLocalToken } from '../src'
-
-const Authed = authenticated()(() => (
- You are authenticated now, your auth token is {getLocalToken()}
-))
-
-const App = () => (
- }
- >
-
-)
-
-ReactDOM.render(
-
+ This would be visible only if logged in.
+
+}
+
+const UseTokenWithoutAuthenticated = () => {
+ const token = useToken()
+ return token={JSON.stringify(token)}
+}
+
+function App() {
+ const [showProtected, setShowProtected] = useState(false)
+ const [showInvalidTokenUse, setShowInvalidTokenUse] = useState(false)
+
+ return (
+
+ Auth Demo
+
+ We render the app inside an AuthContext.Provider.
+ Nothing requires authentication yet.
+
+
+ When you push "reveal", we will show something protected,
+ you are only supposed to see it after being authenticated.
+
+ setShowProtected(!showProtected)}>reveal
+ { showProtected && Using useToken()
+
+ Push the button below to show a component which uses useToken()
+ incorrectly. It will result in a warning on the dev console,
+ unless you are authenticated already.
+
+ setShowInvalidTokenUse(!showInvalidTokenUse)}>show
+ { showInvalidTokenUse &&
+ )
+}
+
+export default App
diff --git a/src/authenticated.js b/src/authenticated.js
deleted file mode 100644
index 6d1d618..0000000
--- a/src/authenticated.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { getLocalToken } from './local-token'
-import contextTypes from './context-types'
-
-export function hashed(o) {
- return Object
- .getOwnPropertyNames(o)
- .map(prop => `${ prop }=${ encodeURIComponent(o[prop]) }`)
- .join('&')
-}
-
-export const authenticated = () => Component => {
- function authorize(provider, clientId) {
- const query = {
- client_id: clientId,
- response_type: 'token',
- redirect_uri: window.location
- }
- const url = `${ provider }/authorize?${ hashed(query) }`
- window.location.replace(url)
- }
- class Authed extends React.Component {
- render() {
- const token = getLocalToken()
- if (!token) {
- const { clientId, provider, loggingInIndicator } = this.context
- authorize(provider, clientId)
- return (loggingInIndicator || Logging in...
)
- } else {
- return
-
this.setState({ open: false })}>close
-
- contextProps={JSON.stringify(otherContextProps)}
- contextState={JSON.stringify(contextState)}
- hashValues={JSON.stringify(hashValues)}
-
-
- {
- this.setState({ token })
- onTokenUpdate && onTokenUpdate(token)
- }}
- />
- { debug &&
- )
- }
-}
-
-AuthContext.propTypes = contextTypes
-AuthContext.childContextTypes = contextTypes
diff --git a/src/components/token-manager.js b/src/components/token-manager.js
deleted file mode 100644
index a8f67cc..0000000
--- a/src/components/token-manager.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React from 'react'
-import { setLocalToken, getLocalToken, getLocalExpiresAt } from '../local-token'
-import contextTypes from '../context-types'
-import { hashed } from '../authenticated'
-import { getHashValues } from '../lib/utils'
-
-class TokenManager extends React.Component {
-
- state = { refreshing: false }
-
- handleTokenUpdate(token, expires_in) {
- setLocalToken(token, expires_in)
- if (this.props.onTokenUpdate) {
- this.props.onTokenUpdate(token)
- }
- }
-
- refresh = () => {
- console.log('should refresh access_token...')
- const { provider, clientId } = this.context
- const state = 'refreshing-' + Math.random()
- const query = {
- client_id: clientId,
- response_type: 'token',
- redirect_uri: window.location,
- state
- }
- const url = `${ provider }/authorize?${ hashed(query) }`
- this.setState({ refreshing: true, url, state })
- this.setInterval()
- }
-
- clearTimer = () => {
- if (this.timer) {
- clearTimeout(this.timer)
- this.timer = undefined
- }
- }
- setTimer = delay => {
- this.timer = setTimeout(this.refresh, delay)
- }
-
- setInterval = () => {
- this.interval = setInterval(this.checkForNewToken, 500)
- }
- clearInterval = () => {
- if (this.interval) {
- clearInterval(this.interval)
- this.interval = undefined
- }
- }
-
- checkForNewToken = () => {
-
- try {
- const iframeDoc = this.iframe && this.iframe.childNodes
- && this.iframe.childNodes.length > 0
- && this.iframe.childNodes[0]
- && this.iframe.childNodes[0].contentDocument
- const valueInIFrame = id => iframeDoc
- && iframeDoc.getElementById(id)
- && iframeDoc.getElementById(id).innerHTML
- const token = valueInIFrame('token')
- const expires_in = valueInIFrame('expires_in')
-
- if (token && expires_in) {
- console.log('got new token', token, expires_in)
- this.clearInterval()
- this.handleTokenUpdate(token, expires_in)
- this.setRefreshTimer(expires_in)
- this.setState({ refreshing: false })
- } else {
- console.log('checked for new token, not found yet')
- }
- } catch(e) {
- this.clearInterval()
- this.setRefreshTimer("60") // try again in 60 seconds
- this.setState({ refreshing: false })
- console.log('exception in checkForNewToken', e)
- }
- }
-
- constructor(props) {
- super(props)
- const hashValues = getHashValues()
- if (hashValues.access_token) {
- this.state = {
- token: hashValues.access_token,
- expires_in: hashValues.expires_in
- }
- }
- }
-
- renderIframe = () => {
- const { refreshing, url } = this.state
- if (refreshing) {
- return { __html: `` }
- } else {
- return { __html: "not refreshing..." }
- }
- }
-
- // 60 seconds before token expires?
- getDelay = expires_in => Number(expires_in) * 1000 - 60 * 1000
-
- setRefreshTimer = expires_in => {
-
- console.log('setRefreshTimer, expires_in', expires_in)
-
- // 60 seconds before expiry
- const delay = this.getDelay(expires_in)
- this.clearTimer()
- this.setTimer(Math.max(delay, 4000))
-
- }
-
- componentDidMount() {
- let localExpiresAt
- if (getLocalToken() && (localExpiresAt = getLocalExpiresAt())) {
- this.setRefreshTimer(
- (localExpiresAt.getTime() - new Date().getTime()) / 1000
- )
- }
- }
-
- componentWillUnmount() {
- this.clearTimer()
- this.clearInterval()
- }
-
- render() {
-
- let isRefreshingInIframe = false
- const results = getHashValues()
-
- if (results.access_token) {
- const { expires_in, state, access_token } = results
- this.handleTokenUpdate(access_token, expires_in)
- // We can refresh only if we get `expires_in` from the server
- // and, if state contains 'refreshing', then we are inside the
- // iframe, and therefore must break recursion
- if (state && state.match(/^refreshing/)) {
- isRefreshingInIframe = true
- }
- if (expires_in && !isRefreshingInIframe) {
- // expires_in = "75" // for testing
- this.setRefreshTimer(expires_in)
- }
- window.location.hash = ""
- }
-
- return (
-
- { isRefreshingInIframe &&
-
-
{ this.state.token }
-
{ this.state.expires_in }
-
- }
- { this.state.refreshing &&
-
{ this.iframe = iframe }}
- dangerouslySetInnerHTML={this.renderIframe()}>
-
- }
-
+ {children}
+
+ )
+ },
+ Authenticated,
+ useToken
+ }
+}
diff --git a/src/lib/helpers/authorize.js b/src/lib/helpers/authorize.js
new file mode 100644
index 0000000..142945b
--- /dev/null
+++ b/src/lib/helpers/authorize.js
@@ -0,0 +1,24 @@
+import { base64URLEncode, sha256 } from "./sha256-base64-url-encode"
+import createCodeVerifier from './create-code-verifier'
+import hashed from './hashed'
+import getEncodedVerifierKey from './getEncodedVerifierKey'
+
+export default function authorize({provider, clientId, storage = sessionStorage}) {
+
+ const encodedVerifier = base64URLEncode(createCodeVerifier())
+ storage.setItem(
+ getEncodedVerifierKey(clientId),
+ encodedVerifier
+ )
+
+ const query = {
+ client_id: clientId,
+ response_type: 'code',
+ redirect_uri: window.location,
+ code_challenge: base64URLEncode(sha256(encodedVerifier)),
+ code_challenge_method: 'S256',
+ }
+
+ const url = `${ provider }/authorize?${ hashed(query) }`
+ window.location.replace(url)
+}
diff --git a/src/lib/helpers/create-code-verifier.js b/src/lib/helpers/create-code-verifier.js
new file mode 100644
index 0000000..8ba6878
--- /dev/null
+++ b/src/lib/helpers/create-code-verifier.js
@@ -0,0 +1,6 @@
+export default () => {
+ const a = new Uint32Array(4) // we want 4 32bit values
+ return Array.from(window.crypto.getRandomValues(a))
+ .map(i => i.toString(16))
+ .join('-')
+}
diff --git a/src/lib/helpers/fetchToken.js b/src/lib/helpers/fetchToken.js
new file mode 100644
index 0000000..984e5e9
--- /dev/null
+++ b/src/lib/helpers/fetchToken.js
@@ -0,0 +1,35 @@
+export const fetchToken = ({ clientId, clientSecret, code, verifier, tokenEndpoint, fetch = window.fetch }) => {
+ const payload = {
+ client_secret: clientSecret,
+ client_id: clientId,
+ code,
+ grant_type: 'authorization_code',
+ code_verifier: verifier
+ };
+ return fetch(tokenEndpoint, {
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ method: 'POST',
+ body: JSON.stringify(payload)
+ })
+ .then(r => {
+ if (!r.ok) {
+ throw new Error(`Token response not ok, status is ${r.status}, check the react-u5auth configuration (wrong provider or token endpoint?)`);
+ }
+ return r.json();
+ })
+ .then(token => {
+ const { expires_in } = token;
+ if (expires_in && Number.isFinite(expires_in)) {
+ const slackSeconds = 10;
+ // add 'expires_at', with the given slack
+ token.expires_at = new Date(new Date().getTime() + expires_in * 1000 - (slackSeconds * 1000));
+ }
+ return token;
+ })
+ .catch(err => {
+ console.error('ERR (fetch)', err);
+ throw err;
+ });
+}
diff --git a/src/lib/helpers/getCodeFromLocation.js b/src/lib/helpers/getCodeFromLocation.js
new file mode 100644
index 0000000..f34be72
--- /dev/null
+++ b/src/lib/helpers/getCodeFromLocation.js
@@ -0,0 +1,14 @@
+export const getCodeFromLocation = ({ location }) => {
+ const split = location.toString().split('?');
+ if (split.length < 2) {
+ return null;
+ }
+ const pairs = split[1].split('&');
+ for (const pair of pairs) {
+ const [key, value] = pair.split('=');
+ if (key === 'code') {
+ return decodeURIComponent(value || '');
+ }
+ }
+ return null;
+}
diff --git a/src/lib/helpers/getEncodedVerifierKey.js b/src/lib/helpers/getEncodedVerifierKey.js
new file mode 100644
index 0000000..de18203
--- /dev/null
+++ b/src/lib/helpers/getEncodedVerifierKey.js
@@ -0,0 +1 @@
+export default clientId => 'encodedVerifier-' + encodeURIComponent(clientId)
\ No newline at end of file
diff --git a/src/lib/helpers/getVerifierFromStorage.js b/src/lib/helpers/getVerifierFromStorage.js
new file mode 100644
index 0000000..fdf97bd
--- /dev/null
+++ b/src/lib/helpers/getVerifierFromStorage.js
@@ -0,0 +1,6 @@
+import getEncodedVerifierKey from './getEncodedVerifierKey'
+export const getVerifierFromStorage = ({ clientId, storage }) => {
+ const key = getEncodedVerifierKey(clientId);
+ const value = storage.getItem(key);
+ return value;
+}
diff --git a/src/lib/helpers/hashed.js b/src/lib/helpers/hashed.js
new file mode 100644
index 0000000..4248849
--- /dev/null
+++ b/src/lib/helpers/hashed.js
@@ -0,0 +1,7 @@
+export default function hashed(o) {
+ return Object
+ .getOwnPropertyNames(o)
+ .map(prop => `${ prop }=${ encodeURIComponent(o[prop]) }`)
+ .join('&')
+}
+
diff --git a/src/lib/helpers/removeCodeFromLocation.js b/src/lib/helpers/removeCodeFromLocation.js
new file mode 100644
index 0000000..d46ea7a
--- /dev/null
+++ b/src/lib/helpers/removeCodeFromLocation.js
@@ -0,0 +1,12 @@
+export const removeCodeFromLocation = () => {
+ const [base, search] = window.location.href.split('?');
+ if (!search) {
+ return;
+ }
+ const newSearch = search.split('&')
+ .map(param => param.split('='))
+ .filter(([key]) => key !== 'code')
+ .map(keyAndVal => keyAndVal.join('='))
+ .join('&');
+ window.history.replaceState(window.history.state, null, base + (newSearch.length ? `?${newSearch}` : ''));
+}
diff --git a/src/lib/helpers/removeVerifierFromStorage.js b/src/lib/helpers/removeVerifierFromStorage.js
new file mode 100644
index 0000000..937574b
--- /dev/null
+++ b/src/lib/helpers/removeVerifierFromStorage.js
@@ -0,0 +1,5 @@
+import getEncodedVerifierKey from './getEncodedVerifierKey'
+export const removeVerifierFromStorage = ({ clientId, storage }) => {
+ const key = getEncodedVerifierKey(clientId);
+ storage.removeItem(key);
+}
diff --git a/src/lib/helpers/sha256-base64-url-encode.js b/src/lib/helpers/sha256-base64-url-encode.js
new file mode 100644
index 0000000..d9516ac
--- /dev/null
+++ b/src/lib/helpers/sha256-base64-url-encode.js
@@ -0,0 +1,16 @@
+import crypto from 'crypto'
+function base64URLEncode(str) {
+ return str.toString('base64')
+ .replace(/\+/g, '-')
+ .replace(/\//g, '_')
+ .replace(/=/g, '');
+}
+
+// var verifier = base64URLEncode(crypto.randomBytes(32));
+
+function sha256(buffer) {
+ return crypto.createHash('sha256').update(buffer).digest();
+}
+// var challenge = base64URLEncode(sha256(verifier));
+
+export {base64URLEncode, sha256}
\ No newline at end of file
diff --git a/src/lib/helpers/utils.js b/src/lib/helpers/utils.js
new file mode 100644
index 0000000..aa12112
--- /dev/null
+++ b/src/lib/helpers/utils.js
@@ -0,0 +1,9 @@
+
+// TODO: HAck, is it ?
+export const getHashValues = () => {
+ const requestUrl = window.location
+ const splitted = requestUrl.search.split("&")
+ const redirect_url = requestUrl.origin + requestUrl.pathname
+ const code = splitted[0].substring(6)
+ return {code, redirect_url}
+}
diff --git a/src/lib/index.js b/src/lib/index.js
new file mode 100644
index 0000000..64f2076
--- /dev/null
+++ b/src/lib/index.js
@@ -0,0 +1 @@
+export { default as createAuthContext } from './createAuthContext'
diff --git a/src/lib/utils.js b/src/lib/utils.js
deleted file mode 100644
index 8162bf2..0000000
--- a/src/lib/utils.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-export const getHashValues = () => {
- const hash = window.location.hash
- if (hash.match(/^#/)) {
- return hash
- .substring(1)
- .split('&')
- .reduce((o, kv) => {
- const a = kv.split('=');
- o[a[0]] = a[1];
- return o;
- }, {});
- } else {
- return {}
- }
-}
diff --git a/src/local-token.js b/src/local-token.js
deleted file mode 100644
index 8258807..0000000
--- a/src/local-token.js
+++ /dev/null
@@ -1,48 +0,0 @@
-let localToken = undefined
-let localExpiresAt = undefined
-
-const localStorageKey = 'tokenAndExpiry'
-
-function isExpired(when) {
- return when.getTime() < new Date().getTime() - 60000 // 1 minute slack
-}
-
-function getLocalToken() {
- // console.log('getLocalToken', localToken)
- if (!localToken) {
- try {
- const item = window.localStorage.getItem(localStorageKey)
- if (item) {
- const { token, expiresAt } = JSON.parse(item)
- const expiresAtAsDate = new Date(expiresAt)
- if (!isExpired(expiresAtAsDate)) {
- localToken = token
- localExpiresAt = expiresAtAsDate
- }
- }
- } catch (e) {
- // do nothing
- }
- }
- return localToken
-}
-
-function getLocalExpiresAt() {
- return localExpiresAt
-}
-
-function setLocalToken(token, expires_in) {
- const expiresAt = expires_in && new Date(new Date().getTime() + expires_in * 1000)
- console.log('setLocalToken', token, expiresAt)
- localToken = token
- try {
- window.localStorage.setItem(localStorageKey, JSON.stringify({
- token,
- expiresAt
- }))
- } catch (e) {
- // do nothing
- }
-}
-
-export { getLocalToken, setLocalToken, getLocalExpiresAt }