From f0c3ef258c9ab415e3dfb0054248299e5f8df904 Mon Sep 17 00:00:00 2001 From: Tiago Rodrigues Date: Tue, 5 Apr 2016 13:09:49 +0200 Subject: [PATCH] Add example for async auth with querystring params Simple workflow that uses querystring parameters to determine if a user can look at a page or not. Parameters can come from a form submission, or from an url with those parameters in. --- .../auth-flow-async-with-query-params/app.js | 97 +++++++++++++++++++ .../index.html | 15 +++ examples/index.html | 1 + 3 files changed, 113 insertions(+) create mode 100644 examples/auth-flow-async-with-query-params/app.js create mode 100644 examples/auth-flow-async-with-query-params/index.html diff --git a/examples/auth-flow-async-with-query-params/app.js b/examples/auth-flow-async-with-query-params/app.js new file mode 100644 index 0000000000..60a00d7440 --- /dev/null +++ b/examples/auth-flow-async-with-query-params/app.js @@ -0,0 +1,97 @@ +import React, { createClass, PropTypes } from 'react' +import { render } from 'react-dom' +import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router' + +function App(props) { + return ( +
+ {props.children} +
+ ) +} + +const Form = createClass({ + contextTypes: { + router: PropTypes.object.isRequired + }, + + getInitialState() { + return { + value: '' + } + }, + + submitAction(event) { + event.preventDefault() + this.context.router.push({ + pathname: '/page', + query: { + qsparam: this.state.value + } + }) + }, + + handleChange(event) { + this.setState({ value: event.target.value }) + }, + + render() { + return ( +
+

Token is pancakes

+ + +

Or authenticate via URL

+

Or try failing to authenticate via URL

+
+ ) + } +}) + +function Page() { + return

Hey I see you are authenticated.

+} + +function ErrorPage() { + return

Oh no! your auth failed!

+} + +function requireCredentials(nextState, replace, next) { + const query = nextState.location.query + if (query.qsparam) { + serverAuth(query.qsparam) + .then( + () => next(), + () => { + replace('/error') + next() + } + ) + } else { + replace('/error') + next() + } +} + +function serverAuth(authToken) { + return new Promise((resolve, reject) => { + // That server is gonna take a while + setTimeout(() => { + if(authToken === 'pancakes') { + resolve('authenticated') + } else { + reject('nope') + } + }, 200) + }) +} + +render(( + + + + + + + +), document.getElementById('example')) diff --git a/examples/auth-flow-async-with-query-params/index.html b/examples/auth-flow-async-with-query-params/index.html new file mode 100644 index 0000000000..9f7c266d89 --- /dev/null +++ b/examples/auth-flow-async-with-query-params/index.html @@ -0,0 +1,15 @@ + + + + + + Authentication with query parameters + + + +

React Router Examples / Async Auth with Query Parameters

+
+ + + + diff --git a/examples/index.html b/examples/index.html index a4de0e1b84..c216d664cb 100644 --- a/examples/index.html +++ b/examples/index.html @@ -8,6 +8,7 @@

React Router Examples

  • Animations
  • Auth Flow
  • Auth with Shared Root
    • +
  • Async Auth with Query Parameters
  • Breadcrumbs
  • Confirming Navigation
  • Dynamic Segments