diff options
| author | Wes Bos <wesbos@gmail.com> | 2017-10-27 13:24:41 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2017-10-27 13:24:41 -0400 |
| commit | 0f1b9240bbd05b377e868faf78b89b509a3d7537 (patch) | |
| tree | 1974b4d5a59f1843f64789b5536c32606a097ba0 /components | |
| parent | acdfa2840f867e686471a8e9ac3f29353fab7dd1 (diff) | |
ayeee
Diffstat (limited to 'components')
| -rw-r--r-- | components/LoginAuth0.js | 12 | ||||
| -rw-r--r-- | components/Signup.js | 68 |
2 files changed, 52 insertions, 28 deletions
diff --git a/components/LoginAuth0.js b/components/LoginAuth0.js index 8691e82..b55ae4a 100644 --- a/components/LoginAuth0.js +++ b/components/LoginAuth0.js @@ -7,8 +7,8 @@ class LoginAuth0 extends Component { constructor(props) { super(props); if (typeof window === 'undefined') return; - const redirectUrl = `http://localhost:6969/signup`; - this._lock = new Auth0Lock('l851ev2q8X48wf56eGLjIWFbMwwbvWPE', 'wesbos.auth0.com', { + const redirectUrl = `http://localhost:3000/signup`; + this._lock = new Auth0Lock('r6D64Waoq7roAnv8GT04dnn1tpq9PAqu', 'wesbos.auth0.com', { auth: { redirect: false, }, @@ -16,11 +16,17 @@ class LoginAuth0 extends Component { } componentDidMount() { - console.log('MOUNT'); this._lock.on('authenticated', authResult => { + console.log(authResult); window.localStorage.setItem('auth0IdToken', authResult.idToken); + console.log('Im baaaack!'); this.props.currentUserQuery.refetch(); }); + + this._lock.on('authorization_error', err => { + console.error(err); + }); + // refech on page load because of the server render this.props.currentUserQuery.refetch(); } diff --git a/components/Signup.js b/components/Signup.js index ab0a498..57e2569 100644 --- a/components/Signup.js +++ b/components/Signup.js @@ -1,52 +1,68 @@ -import React, { Component } from 'react' -import { graphql, gql } from 'react-apollo' +import React, { Component } from 'react'; +import { graphql, gql } from 'react-apollo'; import { CREATE_USER_MUTATION } from '../queries'; class Signup extends Component { - constructor() { super(); - const idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : ''; + const idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : ''; this.state = { email: '', name: '', idToken, - error: undefined - } - + error: undefined, + }; } - render() { return ( <div> - { this.state.loading ? 'LOADING...' : 'Ready!' } + {this.state.loading ? 'LOADING...' : 'Ready!'} - { this.state.error ? <p>{this.state.error.message}</p> : '' } + {this.state.error ? <p>{this.state.error.message}</p> : ''} <form onSubmit={this._createUser}> - <p>Email - <input value={this.state.email} onChange={(e) => this.setState({ email: e.target.value })} type='text' placeholder='email'/> + <p> + Email + <input + value={this.state.email} + onChange={e => this.setState({ email: e.target.value })} + type="text" + placeholder="email" + /> </p> - <p>Name - <input value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} type='text' placeholder='name'/> + <p> + Name + <input + value={this.state.name} + onChange={e => this.setState({ name: e.target.value })} + type="text" + placeholder="name" + /> </p> - <p>idToken - <input disabled value={this.state.idToken} onChange={(e) => this.setState({ idToken: e.target.value })} type='text' placeholder='name'/> + <p> + idToken + <input + disabled + value={this.state.idToken} + onChange={e => this.setState({ idToken: e.target.value })} + type="text" + placeholder="name" + /> </p> <button type="submit">Submit</button> </form> </div> - ) + ); } - _createUser = async (e) => { + _createUser = async e => { e.preventDefault(); // pull the values from state - const { email, name, idToken } = this.state + const { email, name, idToken } = this.state; // create a mutation // TODO: handle any errors // turn loading on @@ -55,22 +71,24 @@ class Signup extends Component { try { const res = await this.props.createUserMutation({ // pass in those variables from state - variables: { name, email, idToken } + variables: { name, email, idToken }, }); - } catch(error) { + } catch (error) { this.setState({ error }); console.dir(error); } this.setState({ loading: false }); - } + }; } // When we submit this mutation, we need to update our store - we have a few ways to do that: // One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency. - -export default graphql(CREATE_USER_MUTATION, { name: 'createUserMutation', options: { +export default graphql(CREATE_USER_MUTATION, { + name: 'createUserMutation', + options: { // Easy, but slow // refetchQueries: ['AllLinksQuery'] // This is much Better / efficient // Notice how the variable is called createItem - that is because createItem is the name of the query! - } })(Signup) + }, +})(Signup); |
