Skip to content

Commit c7a79a1

Browse files
author
Jyri Leinonen
committed
Added authentication UI
1 parent fa9c43d commit c7a79a1

File tree

17 files changed

+5885
-104
lines changed

17 files changed

+5885
-104
lines changed

‎.gitignore‎

Lines changed: 16 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,16 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
49-
50-
# Optional npm cache directory
51-
.npm
52-
53-
# Optional eslint cache
54-
.eslintcache
55-
56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
61-
62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
83-
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*
4+
*.jks
5+
*.p8
6+
*.p12
7+
*.key
8+
*.mobileprovision
9+
*.orig.*
10+
web-build/
11+
12+
# macOS
13+
.DS_Store
14+
15+
.idea/
16+
lib/

‎package.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "aws-amplify-auth-ui-kitten",
3+
"version": "1.0.0",
4+
"description": "AWS Amplify Authentication UI Kitten implementation",
5+
"main": "lib/index.js",
6+
"types": "lib/index.d.ts",
7+
"files": [
8+
"lib/**/*"
9+
],
10+
"scripts": {
11+
"build": "tsc --project ./tsconfig.json",
12+
"pub": "npm version patch && publish",
13+
"test": "echo \"Error: no test specified\" && exit 1"
14+
},
15+
"repository": {
16+
"type": "git",
17+
"url": "git+https://github.com/MEOM/aws-amplify-auth-ui-kitten.git"
18+
},
19+
"keywords": [
20+
"AWS",
21+
"Amplify",
22+
"Authentication",
23+
"UI Kitten"
24+
],
25+
"author": "MEOM",
26+
"license": "MIT",
27+
"bugs": {
28+
"url": "https://github.com/MEOM/aws-amplify-auth-ui-kitten/issues"
29+
},
30+
"homepage": "https://github.com/MEOM/aws-amplify-auth-ui-kitten#readme",
31+
"devDependencies": {
32+
"typescript": "^4.1.3",
33+
"@types/react": "~16.9.35",
34+
"@types/react-dom": "~16.9.8",
35+
"@types/react-native": "~0.63.2",
36+
"@ui-kitten/components": "^5.0.0",
37+
"aws-amplify-react-native": "^4.2.10",
38+
"react": "16.13.1",
39+
"react-dom": "16.13.1",
40+
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz"
41+
},
42+
"peerDependencies": {
43+
"@ui-kitten/components": "^5.0.0",
44+
"aws-amplify-react-native": "^4.2.10",
45+
"react": "16.13.1",
46+
"react-dom": "16.13.1",
47+
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz"
48+
}
49+
}

‎src/ConfirmSignIn.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React, {useEffect, useRef, useState} from 'react';
2+
import { ConfirmSignIn as AmplifyConfirmSignIn } from 'aws-amplify-react-native'
3+
import {KeyboardAvoidingView, Platform } from 'react-native';
4+
import {Input, Layout, Button, Text} from '@ui-kitten/components';
5+
import {AuthStyles} from "./styles";
6+
import {ErrorMessage} from "./components/ErrorMessage";
7+
8+
const MyConfirmSignIn = ({error, goBack, confirmSignIn}: ConfirmSignInProps) => {
9+
const [confirmCode, setConfirmCode] = useState('')
10+
const [errorMessage, setErrorMessage] = useState<string>()
11+
const confirmationCodeRef = useRef<Input>(null)
12+
13+
useEffect(() => {setErrorMessage(error)}, [error])
14+
15+
const submit = () => {
16+
confirmSignIn(confirmCode)
17+
}
18+
19+
return (
20+
<KeyboardAvoidingView style={{flex:1, justifyContent: 'center', alignItems: 'center'}} behavior={Platform.OS == 'ios' ? 'padding' : 'height'}>
21+
<Layout style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
22+
23+
<Text category={"h1"} style={AuthStyles.header}>Confirm Sign In</Text>
24+
25+
<Input
26+
label="Confirmation code"
27+
placeholder="Enter your confirmation code"
28+
ref={confirmationCodeRef}
29+
size="large"
30+
textContentType="oneTimeCode"
31+
importantForAutofill="yes"
32+
autoCapitalize="none"
33+
returnKeyType="next"
34+
keyboardType="number-pad"
35+
onChangeText={nextValue => {
36+
setErrorMessage(undefined)
37+
setConfirmCode(nextValue)
38+
}}
39+
onSubmitEditing={submit}
40+
style={AuthStyles.input}
41+
/>
42+
43+
{errorMessage && <ErrorMessage message={errorMessage} />}
44+
45+
<Button size="large" appearance="outline" style={AuthStyles.button} onPress={submit}>Submit</Button>
46+
47+
<Button appearance="ghost" style={AuthStyles.button} onPress={goBack}>Back to Sign In</Button>
48+
</Layout>
49+
</KeyboardAvoidingView>
50+
)
51+
}
52+
53+
interface ConfirmSignInProps {
54+
error?: string
55+
goBack: () => void
56+
confirmSignIn: (code: string) => void
57+
}
58+
59+
export default class ConfirmSignIn extends AmplifyConfirmSignIn {
60+
showComponent(theme: any) {
61+
return (<MyConfirmSignIn
62+
goBack={() => this.changeState('signIn')}
63+
error={this.state.error}
64+
confirmSignIn={code => this.setState({code, error: null}, this.confirm)}
65+
/>)
66+
}
67+
}

‎src/ConfirmSignUp.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, {useEffect, useRef, useState} from 'react';
2+
import { ConfirmSignUp as AmplifyConfirmSignUp } from 'aws-amplify-react-native'
3+
import {KeyboardAvoidingView, Platform } from 'react-native';
4+
import {Input, Layout, Button, Text} from '@ui-kitten/components';
5+
import {AuthStyles} from "./styles";
6+
import {ErrorMessage} from "./components/ErrorMessage";
7+
import {UsernameInput, UsernameType} from "./components/UsernameInput";
8+
9+
const MyConfirmSignUp = ({error, goBack, confirmSignUp, usernameType, isUserNameNeeded}: ConfirmSignUpProps) => {
10+
const [confirmCode, setConfirmCode] = useState('')
11+
const [errorMessage, setErrorMessage] = useState<string>()
12+
const confirmationCodeRef = useRef<Input>(null)
13+
14+
useEffect(() => {setErrorMessage(error)}, [error])
15+
16+
const submit = () => {
17+
confirmSignUp(confirmCode)
18+
}
19+
20+
return (
21+
<KeyboardAvoidingView style={{flex:1, justifyContent: 'center', alignItems: 'center'}} behavior={Platform.OS == 'ios' ? 'padding' : 'height'}>
22+
<Layout style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
23+
24+
<Text category={"h1"} style={AuthStyles.header}>Confirm Sign Up</Text>
25+
26+
{isUserNameNeeded && <UsernameInput
27+
type={usernameType}
28+
size="large"
29+
textContentType="username"
30+
autoCompleteType="username"
31+
importantForAutofill="yes"
32+
autoCapitalize="none"
33+
returnKeyType="next"
34+
onChangeText={nextValue => {
35+
setErrorMessage(undefined)
36+
setConfirmCode(nextValue)
37+
}}
38+
onSubmitEditing={() => confirmationCodeRef.current?.focus()}
39+
style={AuthStyles.input} />}
40+
41+
<Input
42+
label="Confirmation code"
43+
placeholder="Enter your confirmation code"
44+
ref={confirmationCodeRef}
45+
size="large"
46+
textContentType="oneTimeCode"
47+
importantForAutofill="yes"
48+
autoCapitalize="none"
49+
returnKeyType="next"
50+
keyboardType="number-pad"
51+
onChangeText={nextValue => {
52+
setErrorMessage(undefined)
53+
setConfirmCode(nextValue)
54+
}}
55+
onSubmitEditing={submit}
56+
style={AuthStyles.input}
57+
/>
58+
59+
{errorMessage && <ErrorMessage message={errorMessage} />}
60+
61+
<Button size="large" appearance="outline" style={AuthStyles.button} onPress={submit}>Submit</Button>
62+
63+
<Button appearance="ghost" style={AuthStyles.button} onPress={goBack}>Back to Sign In</Button>
64+
</Layout>
65+
</KeyboardAvoidingView>
66+
)
67+
}
68+
69+
interface ConfirmSignUpProps {
70+
error?: string
71+
goBack: () => void
72+
confirmSignUp: (code: string) => void
73+
usernameType: UsernameType
74+
isUserNameNeeded: boolean
75+
}
76+
77+
export default class ConfirmSignUp extends AmplifyConfirmSignUp {
78+
showComponent(theme: any) {
79+
const { usernameAttributes = "username"} = this.props;
80+
81+
return (<MyConfirmSignUp
82+
goBack={() => this.changeState('signIn')}
83+
error={this.state.error}
84+
confirmSignUp={code => this.setState({code, error: null}, this.confirm)}
85+
usernameType={usernameAttributes}
86+
isUserNameNeeded={this.getUsernameFromInput() === null}
87+
/>)
88+
}
89+
}

0 commit comments

Comments
 (0)