85 |
109 | )
110 | }
111 |
112 | function SignUp(props) {
113 | return (
114 |
86 | {renderForm(formState)}
87 |
88 | {
89 | formType === 'signUp' && (
90 | 91 | Already have an account? updateFormType('signIn')} 94 | >Sign In 95 |
96 | ) 97 | } 98 | { 99 | formType === 'signIn' && ( 100 |101 | Need an account? updateFormType('signUp')} 104 | >Sign Up 105 |
106 | ) 107 | } 108 |
115 | {e.persist();props.updateFormState(e)}}
118 | style={styles.input}
119 | placeholder='username'
120 | />
121 | {e.persist();props.updateFormState(e)}}
125 | style={styles.input}
126 | placeholder='password'
127 | />
128 | {e.persist();props.updateFormState(e)}}
131 | style={styles.input}
132 | placeholder='email'
133 | />
134 |
137 |
138 | )
139 | }
140 |
141 | function SignIn(props) {
142 | return (
143 |
144 | {e.persist();props.updateFormState(e)}}
147 | style={styles.input}
148 | placeholder='username'
149 | />
150 | {e.persist();props.updateFormState(e)}}
154 | style={styles.input}
155 | placeholder='password'
156 | />
157 |
160 |
161 | )
162 | }
163 |
164 | function ConfirmSignUp(props) {
165 | return (
166 |
167 | {e.persist();props.updateFormState(e)}}
171 | style={styles.input}
172 | />
173 |
176 |
177 | )
178 | }
179 |
180 | const styles = {
181 | container: {
182 | display: 'flex',
183 | flexDirection: 'column',
184 | marginTop: 150,
185 | justifyContent: 'center',
186 | alignItems: 'center'
187 | },
188 | input: {
189 | height: 45,
190 | marginTop: 8,
191 | width: 300,
192 | maxWidth: 300,
193 | padding: '0px 8px',
194 | fontSize: 16,
195 | outline: 'none',
196 | border: 'none',
197 | borderBottom: '2px solid rgba(0, 0, 0, .3)'
198 | },
199 | button: {
200 | backgroundColor: '#006bfc',
201 | color: 'white',
202 | width: 316,
203 | height: 45,
204 | marginTop: 10,
205 | fontWeight: '600',
206 | fontSize: 14,
207 | cursor: 'pointer',
208 | border:'none',
209 | outline: 'none',
210 | borderRadius: 3,
211 | boxShadow: '0px 1px 3px rgba(0, 0, 0, .3)',
212 | },
213 | footer: {
214 | fontWeight: '600',
215 | padding: '0px 25px',
216 | textAlign: 'center',
217 | color: 'rgba(0, 0, 0, 0.6)'
218 | },
219 | anchor: {
220 | color: '#006bfc',
221 | cursor: 'pointer'
222 | }
223 | }
--------------------------------------------------------------------------------
/src/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import AmplifyLogo from './amplifyorange.png'
3 |
4 | export default function Header(props) {
5 | return (
6 |
7 |
16 | )
17 | }
18 |
19 | const styles = {
20 | container: {
21 | padding: 20,
22 | position: 'fixed',
23 | top: 0,
24 | left: 0,
25 | right: 0,
26 | maxHeight: 65,
27 | boxShadow: '0px 2px 2px rgba(0, 0, 0, .1)'
28 | },
29 | header: {
30 | margin: 0,
31 | fontSize: 24,
32 | marginLeft: 9,
33 | fontWeight: '300',
34 | marginTop: -3,
35 | color: 'rgb(255, 153, 0)',
36 | cursor: 'pointer',
37 | },
38 | headerContent: {
39 | cursor: 'pointer',
40 | display: 'flex'
41 | },
42 | image: {
43 | height: 22,
44 | cursor: 'pointer',
45 | }
46 | }
--------------------------------------------------------------------------------
/src/Main.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dabit3/amplify-auth-demo/bf80d84e6f08b293dca744820a3ca53d9b052fe2/src/Main.js
--------------------------------------------------------------------------------
/src/amplifyorange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dabit3/amplify-auth-demo/bf80d84e6f08b293dca744820a3ca53d9b052fe2/src/amplifyorange.png
--------------------------------------------------------------------------------
/src/amplifywhite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dabit3/amplify-auth-demo/bf80d84e6f08b293dca744820a3ca53d9b052fe2/src/amplifywhite.png
--------------------------------------------------------------------------------
/src/aws-exports.js:
--------------------------------------------------------------------------------
1 | // WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
2 |
3 | const awsmobile = {
4 | "aws_project_region": "us-east-2",
5 | "aws_cognito_identity_pool_id": "us-east-2:cec55e7d-2e27-4e4d-800a-8924b3d36eb8",
6 | "aws_cognito_region": "us-east-2",
7 | "aws_user_pools_id": "us-east-2_hIDtJZZok",
8 | "aws_user_pools_web_client_id": "4219m8pdpbuqef2kt905gbuos4",
9 | "oauth": {
10 | "domain": "amplifyauthweb-local.auth.us-east-2.amazoncognito.com",
11 | "scope": [
12 | "phone",
13 | "email",
14 | "openid",
15 | "profile",
16 | "aws.cognito.signin.user.admin"
17 | ],
18 | "redirectSignIn": "https://www.amplifyauth.dev?signedin=true",
19 | "redirectSignOut": "https://www.amplifyauth.dev/",
20 | "responseType": "code"
21 | },
22 | "federationTarget": "COGNITO_USER_POOLS"
23 | };
24 |
25 |
26 | export default awsmobile;
27 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | import Amplify from 'aws-amplify'
8 | import config from './aws-exports'
9 | Amplify.configure(config)
10 |
11 | ReactDOM.render( props.updateFormState('base')}>
8 | 
13 |
15 | Amplify Auth Demo
14 |