generated from sikleber/aws-cdk-react-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
121 lines (108 loc) · 3.13 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { ReactElement } from 'react'
import '@aws-amplify/ui-react/styles.css'
import './App.css'
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react'
import Main from './components/Main'
import Header from './components/Header'
import {
ApolloClient,
ApolloLink,
ApolloProvider,
InMemoryCache,
NormalizedCacheObject
} from '@apollo/client'
import { fetchAuthSession } from 'aws-amplify/auth'
import { AUTH_TYPE, AuthOptions, createAuthLink } from 'aws-appsync-auth-link'
import { Amplify } from 'aws-amplify'
import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link'
import axios from 'axios'
const userPoolId = process.env.COGNITO_USER_POOL_ID
const userPoolClientId = process.env.COGNITO_USER_POOL_CLIENT_ID
if (!userPoolId || !userPoolClientId) {
throw new Error(
'Missing environment variables COGNITO_USER_POOL_ID || ' +
'COGNITO_USER_POOL_CLIENT_ID'
)
}
Amplify.configure({
Auth: {
Cognito: {
userPoolId: userPoolId,
userPoolClientId: userPoolClientId,
loginWith: {
username: true,
email: true
},
passwordFormat: {
minLength: 8,
requireLowercase: true,
requireUppercase: true,
requireNumbers: true,
requireSpecialCharacters: false
},
userAttributes: undefined,
mfa: undefined
}
}
})
const graphqlEndpoint = process.env.GRAPHQL_API_ENDPOINT
const graphqlRegion = process.env.GRAPHQL_API_REGION
if (!graphqlEndpoint || !graphqlRegion) {
throw new Error(
'Missing environment variables GRAPHQL_API_ENDPOINT || ' +
'GRAPHQL_API_REGION'
)
}
function getApolloClient(
accessToken: string
): ApolloClient<NormalizedCacheObject> {
const auth: AuthOptions = {
type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
jwtToken: async () => accessToken
}
const config = {
url: graphqlEndpoint as string,
region: graphqlRegion as string,
auth: auth
}
const appsyncLink = ApolloLink.from([
createAuthLink(config),
createSubscriptionHandshakeLink(config)
])
return new ApolloClient({
link: appsyncLink,
cache: new InMemoryCache()
// use this for real data:
// defaultOptions: {
// watchQuery: {
// fetchPolicy: 'cache-first'
// }
// }
})
}
const App: React.FunctionComponent = (): ReactElement => {
const { authStatus } = useAuthenticator((context) => [context.authStatus])
const [accessToken, setAccessToken] = React.useState<string | undefined>()
if (authStatus === 'authenticated' && !accessToken) {
fetchAuthSession().then((session) => {
// get ID token for REST and access token for GraphQL
axios.defaults.headers.common['Authorization'] =
session.tokens?.idToken?.toString()
setAccessToken(session.tokens?.accessToken?.toString())
})
}
return (
<Authenticator>
{accessToken ? (
<ApolloProvider client={getApolloClient(accessToken)}>
<div className='App'>
<Header />
<Main />
<footer className='App-footer' />
</div>
</ApolloProvider>
) : null}
</Authenticator>
)
}
export default App