├── .gitignore ├── README.md ├── amplify ├── .config │ └── project-config.json ├── backend │ ├── auth │ │ └── myappe4620b96 │ │ │ ├── myappe4620b96-cloudformation-template.yml │ │ │ └── parameters.json │ └── backend-config.json └── team-provider-info.json ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── logo.png │ └── logo.svg ├── main.js ├── plugins │ └── vuetify.js ├── router.js ├── utils │ └── auth.js └── views │ ├── About.vue │ ├── Home.vue │ ├── SignIn.vue │ ├── SignUp.vue │ └── SignUpConfirm.vue └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | #amplify 24 | amplify/\#current-cloud-backend 25 | amplify/.config/local-* 26 | amplify/backend/amplify-meta.json 27 | amplify/backend/awscloudformation 28 | build/ 29 | dist/ 30 | node_modules/ 31 | aws-exports.js 32 | awsconfiguration.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # my-app 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /amplify/.config/project-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "my-app", 3 | "version": "2.0", 4 | "frontend": "javascript", 5 | "javascript": { 6 | "framework": "vue", 7 | "config": { 8 | "SourceDir": "src", 9 | "DistributionDir": "dist", 10 | "BuildCommand": "npm run-script build", 11 | "StartCommand": "npm run-script serve" 12 | } 13 | }, 14 | "providers": [ 15 | "awscloudformation" 16 | ] 17 | } -------------------------------------------------------------------------------- /amplify/backend/auth/myappe4620b96/myappe4620b96-cloudformation-template.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: 2010-09-09 2 | 3 | Parameters: 4 | env: 5 | Type: String 6 | authRoleName: 7 | Type: String 8 | unauthRoleName: 9 | Type: String 10 | authRoleArn: 11 | Type: String 12 | unauthRoleArn: 13 | Type: String 14 | 15 | 16 | identityPoolName: 17 | Type: String 18 | 19 | allowUnauthenticatedIdentities: 20 | Type: String 21 | 22 | lambdaLogPolicy: 23 | Type: String 24 | 25 | openIdLambdaRoleName: 26 | Type: String 27 | 28 | openIdRolePolicy: 29 | Type: String 30 | 31 | openIdLambdaIAMPolicy: 32 | Type: String 33 | 34 | openIdLogPolicy: 35 | Type: String 36 | 37 | userPoolName: 38 | Type: String 39 | 40 | autoVerifiedAttributes: 41 | Type: CommaDelimitedList 42 | 43 | mfaConfiguration: 44 | Type: String 45 | 46 | mfaTypes: 47 | Type: CommaDelimitedList 48 | 49 | roleName: 50 | Type: String 51 | 52 | roleExternalId: 53 | Type: String 54 | 55 | policyName: 56 | Type: String 57 | 58 | smsAuthenticationMessage: 59 | Type: String 60 | 61 | smsVerificationMessage: 62 | Type: String 63 | 64 | emailVerificationSubject: 65 | Type: String 66 | 67 | emailVerificationMessage: 68 | Type: String 69 | 70 | defaultPasswordPolicy: 71 | Type: String 72 | 73 | passwordPolicyMinLength: 74 | Type: Number 75 | 76 | passwordPolicyCharacters: 77 | Type: CommaDelimitedList 78 | 79 | requiredAttributes: 80 | Type: CommaDelimitedList 81 | 82 | userpoolClientName: 83 | Type: String 84 | 85 | userpoolClientGenerateSecret: 86 | Type: String 87 | 88 | userpoolClientRefreshTokenValidity: 89 | Type: Number 90 | 91 | userpoolClientWriteAttributes: 92 | Type: CommaDelimitedList 93 | 94 | userpoolClientReadAttributes: 95 | Type: CommaDelimitedList 96 | 97 | mfaLambdaRole: 98 | Type: String 99 | 100 | mfaLambdaLogPolicy: 101 | Type: String 102 | 103 | mfaPassRolePolicy: 104 | Type: String 105 | 106 | mfaLambdaIAMPolicy: 107 | Type: String 108 | 109 | userpoolClientLambdaRole: 110 | Type: String 111 | 112 | userpoolClientLogPolicy: 113 | Type: String 114 | 115 | userpoolClientLambdaPolicy: 116 | Type: String 117 | 118 | userpoolClientSetAttributes: 119 | Type: String 120 | 121 | resourceName: 122 | Type: String 123 | 124 | authSelections: 125 | Type: String 126 | 127 | useDefault: 128 | Type: String 129 | 130 | usernameAttributes: 131 | Type: CommaDelimitedList 132 | 133 | Conditions: 134 | ShouldNotCreateEnvResources: !Equals [ !Ref env, NONE ] 135 | 136 | Resources: 137 | 138 | # BEGIN SNS ROLE RESOURCE 139 | SNSRole: 140 | # Created to allow the UserPool SMS Config to publish via the Simple Notification Service during MFA Process 141 | Type: AWS::IAM::Role 142 | Properties: 143 | RoleName: !If [ShouldNotCreateEnvResources, !Ref roleName, !Join ['',[!Ref roleName, '-', !Ref env]]] 144 | AssumeRolePolicyDocument: 145 | Version: "2012-10-17" 146 | Statement: 147 | - Sid: "" 148 | Effect: "Allow" 149 | Principal: 150 | Service: "cognito-idp.amazonaws.com" 151 | Action: 152 | - "sts:AssumeRole" 153 | Condition: 154 | StringEquals: 155 | sts:ExternalId: !Ref roleExternalId 156 | Policies: 157 | - 158 | PolicyName: !Ref policyName 159 | PolicyDocument: 160 | Version: "2012-10-17" 161 | Statement: 162 | - 163 | Effect: "Allow" 164 | Action: 165 | - "sns:Publish" 166 | Resource: "*" 167 | # BEGIN USER POOL RESOURCES 168 | UserPool: 169 | # Created upon user selection 170 | # Depends on SNS Role for Arn if MFA is enabled 171 | Type: AWS::Cognito::UserPool 172 | UpdateReplacePolicy: Retain 173 | Properties: 174 | UserPoolName: !If [ShouldNotCreateEnvResources, !Ref userPoolName, !Join ['',[!Ref userPoolName, '-', !Ref env]]] 175 | 176 | Schema: 177 | 178 | - 179 | Name: email 180 | Required: true 181 | Mutable: true 182 | 183 | 184 | 185 | AutoVerifiedAttributes: !Ref autoVerifiedAttributes 186 | 187 | 188 | EmailVerificationMessage: !Ref emailVerificationMessage 189 | EmailVerificationSubject: !Ref emailVerificationSubject 190 | 191 | Policies: 192 | PasswordPolicy: 193 | MinimumLength: !Ref passwordPolicyMinLength 194 | RequireLowercase: false 195 | RequireNumbers: false 196 | RequireSymbols: false 197 | RequireUppercase: false 198 | 199 | UsernameAttributes: !Ref usernameAttributes 200 | 201 | MfaConfiguration: !Ref mfaConfiguration 202 | SmsVerificationMessage: !Ref smsVerificationMessage 203 | SmsConfiguration: 204 | SnsCallerArn: !GetAtt SNSRole.Arn 205 | ExternalId: !Ref roleExternalId 206 | 207 | UserPoolClientWeb: 208 | # Created provide application access to user pool 209 | # Depends on UserPool for ID reference 210 | Type: "AWS::Cognito::UserPoolClient" 211 | Properties: 212 | ClientName: myappee4620b96_app_clientWeb 213 | 214 | RefreshTokenValidity: !Ref userpoolClientRefreshTokenValidity 215 | UserPoolId: !Ref UserPool 216 | DependsOn: UserPool 217 | UserPoolClient: 218 | # Created provide application access to user pool 219 | # Depends on UserPool for ID reference 220 | Type: "AWS::Cognito::UserPoolClient" 221 | Properties: 222 | ClientName: !Ref userpoolClientName 223 | 224 | GenerateSecret: !Ref userpoolClientGenerateSecret 225 | RefreshTokenValidity: !Ref userpoolClientRefreshTokenValidity 226 | UserPoolId: !Ref UserPool 227 | DependsOn: UserPool 228 | # BEGIN USER POOL LAMBDA RESOURCES 229 | UserPoolClientRole: 230 | # Created to execute Lambda which gets userpool app client config values 231 | Type: 'AWS::IAM::Role' 232 | Properties: 233 | RoleName: !If [ShouldNotCreateEnvResources, !Ref userpoolClientLambdaRole, !Join ['',[!Ref userpoolClientLambdaRole, '-', !Ref env]]] 234 | AssumeRolePolicyDocument: 235 | Version: '2012-10-17' 236 | Statement: 237 | - Effect: Allow 238 | Principal: 239 | Service: 240 | - lambda.amazonaws.com 241 | Action: 242 | - 'sts:AssumeRole' 243 | DependsOn: UserPoolClient 244 | UserPoolClientLambda: 245 | # Lambda which gets userpool app client config values 246 | # Depends on UserPool for id 247 | # Depends on UserPoolClientRole for role ARN 248 | Type: 'AWS::Lambda::Function' 249 | Properties: 250 | Code: 251 | ZipFile: !Join 252 | - |+ 253 | - - 'const response = require(''cfn-response'');' 254 | - 'const aws = require(''aws-sdk'');' 255 | - 'const identity = new aws.CognitoIdentityServiceProvider();' 256 | - 'exports.handler = (event, context, callback) => {' 257 | - ' if (event.RequestType == ''Delete'') { ' 258 | - ' response.send(event, context, response.SUCCESS, {})' 259 | - ' }' 260 | - ' if (event.RequestType == ''Update'' || event.RequestType == ''Create'') {' 261 | - ' const params = {' 262 | - ' ClientId: event.ResourceProperties.clientId,' 263 | - ' UserPoolId: event.ResourceProperties.userpoolId' 264 | - ' };' 265 | - ' identity.describeUserPoolClient(params).promise()' 266 | - ' .then((res) => {' 267 | - ' response.send(event, context, response.SUCCESS, {''appSecret'': res.UserPoolClient.ClientSecret});' 268 | - ' })' 269 | - ' .catch((err) => {' 270 | - ' response.send(event, context, response.FAILED, {err});' 271 | - ' });' 272 | - ' }' 273 | - '};' 274 | Handler: index.handler 275 | Runtime: nodejs8.10 276 | Timeout: '300' 277 | Role: !GetAtt 278 | - UserPoolClientRole 279 | - Arn 280 | DependsOn: UserPoolClientRole 281 | UserPoolClientLambdaPolicy: 282 | # Sets userpool policy for the role that executes the Userpool Client Lambda 283 | # Depends on UserPool for Arn 284 | # Marked as depending on UserPoolClientRole for easier to understand CFN sequencing 285 | Type: 'AWS::IAM::Policy' 286 | Properties: 287 | PolicyName: !Ref userpoolClientLambdaPolicy 288 | Roles: 289 | - !If [ShouldNotCreateEnvResources, !Ref userpoolClientLambdaRole, !Join ['',[!Ref userpoolClientLambdaRole, '-', !Ref env]]] 290 | PolicyDocument: 291 | Version: '2012-10-17' 292 | Statement: 293 | - Effect: Allow 294 | Action: 295 | - 'cognito-idp:DescribeUserPoolClient' 296 | Resource: !GetAtt UserPool.Arn 297 | DependsOn: UserPoolClientLambda 298 | UserPoolClientLogPolicy: 299 | # Sets log policy for the role that executes the Userpool Client Lambda 300 | # Depends on UserPool for Arn 301 | # Marked as depending on UserPoolClientLambdaPolicy for easier to understand CFN sequencing 302 | Type: 'AWS::IAM::Policy' 303 | Properties: 304 | PolicyName: !Ref userpoolClientLogPolicy 305 | Roles: 306 | - !If [ShouldNotCreateEnvResources, !Ref userpoolClientLambdaRole, !Join ['',[!Ref userpoolClientLambdaRole, '-', !Ref env]]] 307 | PolicyDocument: 308 | Version: 2012-10-17 309 | Statement: 310 | - Effect: Allow 311 | Action: 312 | - 'logs:CreateLogGroup' 313 | - 'logs:CreateLogStream' 314 | - 'logs:PutLogEvents' 315 | Resource: !Sub 316 | - arn:aws:logs:${region}:${account}:log-group:/aws/lambda/${lambda}:log-stream:* 317 | - { region: !Ref "AWS::Region", account: !Ref "AWS::AccountId", lambda: !Ref UserPoolClientLambda} 318 | DependsOn: UserPoolClientLambdaPolicy 319 | UserPoolClientInputs: 320 | # Values passed to Userpool client Lambda 321 | # Depends on UserPool for Id 322 | # Depends on UserPoolClient for Id 323 | # Marked as depending on UserPoolClientLambdaPolicy for easier to understand CFN sequencing 324 | Type: 'Custom::LambdaCallout' 325 | Properties: 326 | ServiceToken: !GetAtt UserPoolClientLambda.Arn 327 | clientId: !Ref UserPoolClient 328 | userpoolId: !Ref UserPool 329 | DependsOn: UserPoolClientLogPolicy 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | # BEGIN IDENTITY POOL RESOURCES 338 | 339 | 340 | IdentityPool: 341 | # Always created 342 | Type: AWS::Cognito::IdentityPool 343 | Properties: 344 | IdentityPoolName: !If [ShouldNotCreateEnvResources, 'myappe4620b96_identitypool_e4620b96', !Join ['',['myappe4620b96_identitypool_e4620b96', '__', !Ref env]]] 345 | 346 | CognitoIdentityProviders: 347 | - ClientId: !Ref UserPoolClient 348 | ProviderName: !Sub 349 | - cognito-idp.${region}.amazonaws.com/${client} 350 | - { region: !Ref "AWS::Region", client: !Ref UserPool} 351 | - ClientId: !Ref UserPoolClientWeb 352 | ProviderName: !Sub 353 | - cognito-idp.${region}.amazonaws.com/${client} 354 | - { region: !Ref "AWS::Region", client: !Ref UserPool} 355 | 356 | AllowUnauthenticatedIdentities: !Ref allowUnauthenticatedIdentities 357 | 358 | 359 | DependsOn: UserPoolClientInputs 360 | 361 | 362 | IdentityPoolRoleMap: 363 | # Created to map Auth and Unauth roles to the identity pool 364 | # Depends on Identity Pool for ID ref 365 | Type: AWS::Cognito::IdentityPoolRoleAttachment 366 | Properties: 367 | IdentityPoolId: !Ref IdentityPool 368 | Roles: 369 | unauthenticated: !Ref unauthRoleArn 370 | authenticated: !Ref authRoleArn 371 | DependsOn: IdentityPool 372 | 373 | 374 | Outputs : 375 | 376 | IdentityPoolId: 377 | Value: !Ref 'IdentityPool' 378 | Description: Id for the identity pool 379 | IdentityPoolName: 380 | Value: !GetAtt IdentityPool.Name 381 | 382 | 383 | 384 | 385 | UserPoolId: 386 | Value: !Ref 'UserPool' 387 | Description: Id for the user pool 388 | UserPoolName: 389 | Value: !Ref userPoolName 390 | AppClientIDWeb: 391 | Value: !Ref 'UserPoolClientWeb' 392 | Description: The user pool app client id for web 393 | AppClientID: 394 | Value: !Ref 'UserPoolClient' 395 | Description: The user pool app client id 396 | AppClientSecret: 397 | Value: !GetAtt UserPoolClientInputs.appSecret 398 | 399 | 400 | 401 | 402 | 403 | 404 | -------------------------------------------------------------------------------- /amplify/backend/auth/myappe4620b96/parameters.json: -------------------------------------------------------------------------------- 1 | { 2 | "identityPoolName": "myappe4620b96_identitypool_e4620b96", 3 | "allowUnauthenticatedIdentities": false, 4 | "lambdaLogPolicy": "myappe_e4620b96_lambda_log_policy", 5 | "openIdLambdaRoleName": "myappe_e4620b96_openid_lambda_role", 6 | "openIdRolePolicy": "myappe_e4620b96_openid_pass_role_policy", 7 | "openIdLambdaIAMPolicy": "myappe_e4620b96_openid_lambda_iam_policy", 8 | "openIdLogPolicy": "myappe_e4620b96_openid_lambda_log_policy", 9 | "userPoolName": "myappe4620b96_userpool_e4620b96", 10 | "autoVerifiedAttributes": [ 11 | "email" 12 | ], 13 | "mfaConfiguration": "OFF", 14 | "mfaTypes": [ 15 | "SMS Text Message" 16 | ], 17 | "roleName": "myappee4620b96_sns-role", 18 | "roleExternalId": "myappee4620b96_role_external_id", 19 | "policyName": "myappee4620b96-sns-policy", 20 | "smsAuthenticationMessage": "Your authentication code is {####}", 21 | "smsVerificationMessage": "Your verification code is {####}", 22 | "emailVerificationSubject": "Your verification code", 23 | "emailVerificationMessage": "Your verification code is {####}", 24 | "defaultPasswordPolicy": false, 25 | "passwordPolicyMinLength": 8, 26 | "passwordPolicyCharacters": [], 27 | "requiredAttributes": [ 28 | "email" 29 | ], 30 | "userpoolClientName": "myappee4620b96_app_client", 31 | "userpoolClientGenerateSecret": true, 32 | "userpoolClientRefreshTokenValidity": 30, 33 | "userpoolClientWriteAttributes": [ 34 | "email" 35 | ], 36 | "userpoolClientReadAttributes": [ 37 | "email" 38 | ], 39 | "mfaLambdaRole": "myappee4620b96_totp_lambda_role", 40 | "mfaLambdaLogPolicy": "myappee4620b96_totp_lambda_log_policy", 41 | "mfaPassRolePolicy": "myappee4620b96_totp_pass_role_policy", 42 | "mfaLambdaIAMPolicy": "myappee4620b96_totp_lambda_iam_policy", 43 | "userpoolClientLambdaRole": "myappee4620b96_userpoolclient_lambda_role", 44 | "userpoolClientLogPolicy": "myappee4620b96_userpoolclient_lambda_log_policy", 45 | "userpoolClientLambdaPolicy": "myappee4620b96_userpoolclient_lambda_iam_policy", 46 | "userpoolClientSetAttributes": false, 47 | "resourceName": "myappe4620b96", 48 | "authSelections": "identityPoolAndUserPool", 49 | "authRoleName": { 50 | "Ref": "AuthRoleName" 51 | }, 52 | "unauthRoleName": { 53 | "Ref": "UnauthRoleName" 54 | }, 55 | "authRoleArn": { 56 | "Fn::GetAtt": [ 57 | "AuthRole", 58 | "Arn" 59 | ] 60 | }, 61 | "unauthRoleArn": { 62 | "Fn::GetAtt": [ 63 | "UnauthRole", 64 | "Arn" 65 | ] 66 | }, 67 | "useDefault": "default", 68 | "usernameAttributes": [ 69 | "email" 70 | ] 71 | } -------------------------------------------------------------------------------- /amplify/backend/backend-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "auth": { 3 | "myappe4620b96": { 4 | "service": "Cognito", 5 | "providerPlugin": "awscloudformation" 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /amplify/team-provider-info.json: -------------------------------------------------------------------------------- 1 | { 2 | "dev": { 3 | "awscloudformation": { 4 | "AuthRoleName": "my-app-dev-20190701183018-authRole", 5 | "UnauthRoleArn": "arn:aws:iam::690565680494:role/my-app-dev-20190701183018-unauthRole", 6 | "AuthRoleArn": "arn:aws:iam::690565680494:role/my-app-dev-20190701183018-authRole", 7 | "Region": "us-west-2", 8 | "DeploymentBucketName": "my-app-dev-20190701183018-deployment", 9 | "UnauthRoleName": "my-app-dev-20190701183018-unauthRole", 10 | "StackName": "my-app-dev-20190701183018", 11 | "StackId": "arn:aws:cloudformation:us-west-2:690565680494:stack/my-app-dev-20190701183018/f35f1f20-9c68-11e9-a818-065f9ec2d268" 12 | }, 13 | "categories": { 14 | "auth": { 15 | "myappe4620b96": {} 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "aws-amplify": "^1.1.29", 12 | "aws-amplify-vue": "^0.2.12", 13 | "core-js": "^2.6.5", 14 | "vue": "^2.6.10", 15 | "vue-router": "^3.0.3", 16 | "vuetify": "^1.5.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.8.0", 20 | "@vue/cli-plugin-eslint": "^3.8.0", 21 | "@vue/cli-service": "^3.8.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "stylus": "^0.54.5", 26 | "stylus-loader": "^3.0.1", 27 | "vue-cli-plugin-vuetify": "^0.5.0", 28 | "vue-template-compiler": "^2.6.10", 29 | "vuetify-loader": "^1.0.5" 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/essential", 38 | "eslint:recommended" 39 | ], 40 | "rules": { 41 | "no-console": "off" 42 | }, 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | } 46 | }, 47 | "postcss": { 48 | "plugins": { 49 | "autoprefixer": {} 50 | } 51 | }, 52 | "browserslist": [ 53 | "> 1%", 54 | "last 2 versions" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wataruoguchi/aws-amplify-auth-vuejs-example/835507e86a5eaa0a3b814b3b05f4ee13a2d47482/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-app 9 | 10 | 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 35 | 70 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wataruoguchi/aws-amplify-auth-vuejs-example/835507e86a5eaa0a3b814b3b05f4ee13a2d47482/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | Artboard 46 2 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import './plugins/vuetify' 3 | import App from './App.vue' 4 | import router from './router' 5 | import Amplify from 'aws-amplify' 6 | import awsconfig from './aws-exports' 7 | Amplify.configure(awsconfig) 8 | 9 | Vue.config.productionTip = false 10 | 11 | new Vue({ 12 | router, 13 | render: h => h(App) 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuetify from 'vuetify/lib' 3 | import 'vuetify/src/stylus/app.styl' 4 | 5 | Vue.use(Vuetify, { 6 | iconfont: 'md', 7 | }) 8 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | import { AmplifyEventBus } from 'aws-amplify-vue' 5 | import {getUser} from '@/utils/auth.js' 6 | 7 | Vue.use(Router) 8 | 9 | const router = new Router({ 10 | mode: 'history', 11 | base: process.env.BASE_URL, 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'home', 16 | component: Home, 17 | meta: { requiresAuth: true }, 18 | }, 19 | { 20 | path: '/about', 21 | name: 'about', 22 | // route level code-splitting 23 | // this generates a separate chunk (about.[hash].js) for this route 24 | // which is lazy-loaded when the route is visited. 25 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 26 | }, 27 | { 28 | path: '/signUp', 29 | name: 'signUp', 30 | component: () => import(/* webpackChunkName: "signup" */ './views/SignUp.vue'), 31 | meta: { requiresAuth: false }, 32 | }, 33 | { 34 | path: '/signUpConfirm', 35 | name: 'signUpConfirm', 36 | component: () => import(/* webpackChunkName: "confirm" */ './views/SignUpConfirm.vue'), 37 | meta: { requiresAuth: false }, 38 | }, 39 | { 40 | path: '/signIn', 41 | name: 'signIn', 42 | component: () => import(/* webpackChunkName: "signin" */ './views/SignIn.vue'), 43 | meta: { requiresAuth: false }, 44 | }, 45 | ] 46 | }) 47 | 48 | getUser().then((user) => { 49 | if (user) { 50 | router.push({path: '/'}) 51 | } 52 | }) 53 | 54 | AmplifyEventBus.$on('authState', async (state) => { 55 | const pushPathes = { 56 | signedOut: () => { 57 | router.push({path: '/signIn'}) 58 | }, 59 | signUp: () => { 60 | router.push({path: '/signUp'}) 61 | }, 62 | confirmSignUp: () => { 63 | router.push({path: '/signUpConfirm'}) 64 | }, 65 | signIn: () => { 66 | router.push({path: '/signIn'}) 67 | }, 68 | signedIn: () => { 69 | router.push({path: '/'}) 70 | } 71 | } 72 | if (typeof pushPathes[state] === 'function') { 73 | pushPathes[state]() 74 | } 75 | }) 76 | 77 | router.beforeResolve(async (to, from, next) => { 78 | const user = await getUser() 79 | if (!user) { 80 | if (to.matched.some((record) => record.meta.requiresAuth)) { 81 | return next({ 82 | path: '/signIn', 83 | }) 84 | } 85 | } else { 86 | if (to.matched.some((record) => typeof(record.meta.requiresAuth) === "boolean" && !record.meta.requiresAuth)) { 87 | return next({ 88 | path: '/', 89 | }) 90 | } 91 | } 92 | return next() 93 | }) 94 | 95 | export default router -------------------------------------------------------------------------------- /src/utils/auth.js: -------------------------------------------------------------------------------- 1 | import { Auth } from 'aws-amplify' 2 | import { AmplifyEventBus } from 'aws-amplify-vue' 3 | 4 | function getUser() { 5 | return Auth.currentAuthenticatedUser().then((user) => { 6 | if (user && user.signInUserSession) { 7 | return user 8 | } else { 9 | return null 10 | } 11 | }).catch(err => { 12 | console.log(err); 13 | return null; 14 | }); 15 | } 16 | 17 | function signUp(username, password) { 18 | return Auth.signUp({ 19 | username, 20 | password, 21 | attributes: { 22 | email: username, 23 | }, 24 | }) 25 | .then(data => { 26 | AmplifyEventBus.$emit('localUser', data.user); 27 | if (data.userConfirmed === false) { 28 | AmplifyEventBus.$emit('authState', 'confirmSignUp'); 29 | } else { 30 | AmplifyEventBus.$emit('authState', 'signIn'); 31 | } 32 | return data; 33 | }) 34 | .catch(err => { 35 | console.log(err); 36 | }); 37 | } 38 | 39 | function confirmSignUp(username, code) { 40 | return Auth.confirmSignUp(username, code).then(data => { 41 | AmplifyEventBus.$emit('authState', 'signIn') 42 | return data // 'SUCCESS' 43 | }) 44 | .catch(err => { 45 | console.log(err); 46 | throw err; 47 | }); 48 | } 49 | 50 | function resendSignUp(username) { 51 | return Auth.resendSignUp(username).then(() => { 52 | return 'SUCCESS'; 53 | }).catch(err => { 54 | console.log(err); 55 | return err; 56 | }); 57 | } 58 | 59 | async function signIn(username, password) { 60 | try { 61 | const user = await Auth.signIn(username, password); 62 | if (user) { 63 | AmplifyEventBus.$emit('authState', 'signedIn'); 64 | } 65 | } catch (err) { 66 | if (err.code === 'UserNotConfirmedException') { 67 | // The error happens if the user didn't finish the confirmation step when signing up 68 | // In this case you need to resend the code and confirm the user 69 | // About how to resend the code and confirm the user, please check the signUp part 70 | } else if (err.code === 'PasswordResetRequiredException') { 71 | // The error happens when the password is reset in the Cognito console 72 | // In this case you need to call forgotPassword to reset the password 73 | // Please check the Forgot Password part. 74 | } else if (err.code === 'NotAuthorizedException') { 75 | // The error happens when the incorrect password is provided 76 | } else if (err.code === 'UserNotFoundException') { 77 | // The error happens when the supplied username/email does not exist in the Cognito user pool 78 | } else { 79 | console.log(err); 80 | } 81 | } 82 | } 83 | 84 | function signOut() { 85 | return Auth.signOut() 86 | .then(data => { 87 | AmplifyEventBus.$emit('authState', 'signedOut'); 88 | return data; 89 | }) 90 | .catch(err => { 91 | console.log(err); 92 | return err; 93 | }); 94 | } 95 | 96 | export {getUser, signUp, confirmSignUp, resendSignUp, signIn, signOut}; -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /src/views/SignIn.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 59 | -------------------------------------------------------------------------------- /src/views/SignUp.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | -------------------------------------------------------------------------------- /src/views/SignUpConfirm.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 52 | --------------------------------------------------------------------------------