diff --git a/src/fragments/lib/auth/js/advanced.mdx b/src/fragments/lib/auth/js/advanced.mdx index e849e023037..6d4c007dee3 100644 --- a/src/fragments/lib/auth/js/advanced.mdx +++ b/src/fragments/lib/auth/js/advanced.mdx @@ -13,30 +13,30 @@ import { Auth } from 'aws-amplify'; // To derive necessary data from the provider const { - token, // the token you get from the provider - domainOrProviderName, // Either the domain of the provider(e.g. accounts.your-openid-provider.com) or the provider name, for now the library only supports 'google', 'facebook', 'amazon', 'developer' - expiresIn, // the time in ms which describes how long the token could live - user, // the user object you defined, e.g. { username, email, phone_number } - identity_id // Optional, the identity id specified by the provider + token, // the token you get from the provider + domainOrProviderName, // Either the domain of the provider(e.g. accounts.your-openid-provider.com) or the provider name, for now the library only supports 'google', 'facebook', 'amazon', 'developer' + expiresIn, // the time in ms which describes how long the token could live + user, // the user object you defined, e.g. { username, email, phone_number } + identity_id // Optional, the identity id specified by the provider } = getFromProvider(); // arbitrary function Auth.federatedSignIn( - domain, - { - token, - identity_id, // Optional - expires_at: expiresIn * 1000 + new Date().getTime() // the expiration timestamp - }, - user + domain, + { + token, + identity_id, // Optional + expires_at: expiresIn * 1000 + new Date().getTime() // the expiration timestamp + }, + user ).then(cred => { - // If success, you will get the AWS credentials - console.log(cred); - return Auth.currentAuthenticatedUser(); + // If success, you will get the AWS credentials + console.log(cred); + return Auth.currentAuthenticatedUser(); }).then(user => { - // If success, the user object you passed in Auth.federatedSignIn - console.log(user); + // If success, the user object you passed in Auth.federatedSignIn + console.log(user); }).catch(e => { - console.log(e) + console.log(e) }); ``` @@ -52,85 +52,85 @@ import { Auth } from 'aws-amplify'; // To federated sign in from Facebook const SignInWithFacebook = () => { - useEffect(() => { - if (!window.FB) createScript(); - }, []) - - const signIn = () => { - const fb = window.FB; - fb.getLoginStatus(response => { - if (response.status === 'connected') { - getAWSCredentials(response.authResponse); - } else { - fb.login( - response => { - if (!response || !response.authResponse) { - return; - } - getAWSCredentials(response.authResponse); - }, - { - // the authorized scopes - scope: 'public_profile,email' - } - ); + useEffect(() => { + if (!window.FB) createScript(); + }, []) + + const signIn = () => { + const fb = window.FB; + fb.getLoginStatus(response => { + if (response.status === 'connected') { + getAWSCredentials(response.authResponse); + } else { + fb.login( + response => { + if (!response || !response.authResponse) { + return; } - }); + getAWSCredentials(response.authResponse); + }, + { + // the authorized scopes + scope: 'public_profile,email' + } + ); + } + }); + } + + const getAWSCredentials = (response) => { + const { accessToken, expiresIn } = response; + const date = new Date(); + const expires_at = expiresIn * 1000 + date.getTime(); + if (!accessToken) { + return; } - const getAWSCredentials = (response) => { - const { accessToken, expiresIn } = response; - const date = new Date(); - const expires_at = expiresIn * 1000 + date.getTime(); - if (!accessToken) { - return; - } + const fb = window.FB; + fb.api('/me', { fields: 'name,email' }, response => { + const user = { + name: response.name, + email: response.email + }; + + Auth.federatedSignIn('facebook', { token: accessToken, expires_at }, user) + .then(credentials => { + console.log(credentials); + }); + }); + } - const fb = window.FB; - fb.api('/me', { fields: 'name,email' }, response => { - const user = { - name: response.name, - email: response.email - }; - - Auth.federatedSignIn('facebook', { token: accessToken, expires_at }, user) - .then(credentials => { - console.log(credentials); - }); - }); - } - - const createScript = () => { - // load the sdk - window.fbAsyncInit = fbAsyncInit; - const script = document.createElement('script'); - script.src = 'https://connect.facebook.net/en_US/sdk.js'; - script.async = true; - script.onload = initFB; - document.body.appendChild(script); - } + const createScript = () => { + // load the sdk + window.fbAsyncInit = fbAsyncInit; + const script = document.createElement('script'); + script.src = 'https://connect.facebook.net/en_US/sdk.js'; + script.async = true; + script.onload = initFB; + document.body.appendChild(script); + } - const initFB = () => { - const fb = window.FB; - console.log('FB SDK initialized'); - } + const initFB = () => { + const fb = window.FB; + console.log('FB SDK initialized'); + } - const fbAsyncInit = () => { - // init the fb sdk client - const fb = window.FB; - fb.init({ - appId : 'your_facebook_app_id', - cookie : true, - xfbml : true, - version : 'v2.11' - }); - } - - return ( -
- -
- ); + const fbAsyncInit = () => { + // init the fb sdk client + const fb = window.FB; + fb.init({ + appId : 'your_facebook_app_id', + cookie : true, + xfbml : true, + version : 'v2.11' + }); + } + + return ( +
+ +
+ ); } ``` ### Facebook Sign-in (React Native - Expo) @@ -268,23 +268,23 @@ Note: Automatic token refresh for Google and Facebook is not supported in React import { Auth } from 'aws-amplify'; function refreshToken() { - // refresh the token here and get the new token info - // ...... - - return new Promise(res, rej => { - const data = { - token, // the token from the provider - expires_at, // the timestamp for the expiration - identity_id, // optional, the identityId for the credentials - } - res(data); - }); + // refresh the token here and get the new token info + // ...... + + return new Promise(res, rej => { + const data = { + token, // the token from the provider + expires_at, // the timestamp for the expiration + identity_id, // optional, the identityId for the credentials + } + res(data); + }); } Auth.configure({ - refreshHandlers: { - 'developer': refreshToken // the property could be 'google', 'facebook', 'amazon', 'developer', OpenId domain - } + refreshHandlers: { + 'developer': refreshToken // the property could be 'google', 'facebook', 'amazon', 'developer', OpenId domain + } }) ``` @@ -301,23 +301,23 @@ const { idToken, domain, name, email, phoneNumber } = getFromAuth0(); // get the const { exp } = decodeJWTToken(idToken); // Please decode the id token in order to get the expiration time Auth.federatedSignIn( - domain, // The Auth0 Domain, - { - token: idToken, // The id token from Auth0 - // expires_at means the timestamp when the token provided expires, - // here you can derive it from the expiresIn parameter provided, - // then convert its unit from second to millisecond, and add the current timestamp - expires_at: exp * 1000 // the expiration timestamp - }, - { - // the user object, you can put whatever property you get from the Auth0 - // for example: - name, // the user name - email, // Optional, the email address - phoneNumber, // Optional, the phone number - } + domain, // The Auth0 Domain, + { + token: idToken, // The id token from Auth0 + // expires_at means the timestamp when the token provided expires, + // here you can derive it from the expiresIn parameter provided, + // then convert its unit from second to millisecond, and add the current timestamp + expires_at: exp * 1000 // the expiration timestamp + }, + { + // the user object, you can put whatever property you get from the Auth0 + // for example: + name, // the user name + email, // Optional, the email address + phoneNumber, // Optional, the phone number + } ).then(cred => { - console.log(cred); + console.log(cred); }); ``` @@ -333,23 +333,23 @@ Step 4. You can pass a refresh handler to the Auth module to refresh the id toke ```js function refreshToken() { - // refresh the token here and get the new token info - // ...... - - return new Promise(res, rej => { - const data = { - token, // the token from the provider - expires_at, // the timestamp when the token expires (in milliseconds) - identity_id, // optional, the identityId for the credentials - } - res(data); - }); + // refresh the token here and get the new token info + // ...... + + return new Promise(res, rej => { + const data = { + token, // the token from the provider + expires_at, // the timestamp when the token expires (in milliseconds) + identity_id, // optional, the identityId for the credentials + } + res(data); + }); } Auth.configure({ - refreshHandlers: { - 'your_auth0_domain': refreshToken - } + refreshHandlers: { + 'your_auth0_domain': refreshToken + } }) ``` @@ -363,9 +363,9 @@ If you have a Pre Sign-up or Pre Authentication Lambda trigger enabled, you can ```js Auth.signIn({ - username, // Required, the username - password, // Optional, the password - validationData, // Optional, an object of key-value pairs which can contain any key and will be passed to your Lambda trigger as-is. + username, // Required, the username + password, // Optional, the password + validationData, // Optional, an object of key-value pairs which can contain any key and will be passed to your Lambda trigger as-is. }).then(user => console.log(user)) .catch(err => console.log(err)); ``` @@ -379,17 +379,17 @@ If you have `autoSignIn` enabled, you can pass `validationData` as property for ```js Auth.signUp({ - username, - password, - attributes: { - email, // optional - phone_number, // optional - E.164 number convention - // other custom attributes - }, - autoSignIn: { // optional - enables auto sign in after user is confirmed - enabled: true, - validationData, // optional - } + username, + password, + attributes: { + email, // optional + phone_number, // optional - E.164 number convention + // other custom attributes + }, + autoSignIn: { // optional - enables auto sign in after user is confirmed + enabled: true, + validationData, // optional + } }) ``` diff --git a/src/fragments/lib/auth/js/emailpassword.mdx b/src/fragments/lib/auth/js/emailpassword.mdx index 27afe2cf5b4..4c407eb689f 100644 --- a/src/fragments/lib/auth/js/emailpassword.mdx +++ b/src/fragments/lib/auth/js/emailpassword.mdx @@ -6,23 +6,23 @@ Create a new user in the Amazon Cognito UserPool by passing the new user's email import { Auth } from 'aws-amplify'; async function signUp() { - try { - const { user } = await Auth.signUp({ - username, - password, - attributes: { - email, // optional - phone_number, // optional - E.164 number convention - // other custom attributes - }, - autoSignIn: { // optional - enables auto sign in after user is confirmed - enabled: true, - } - }); - console.log(user); - } catch (error) { - console.log('error signing up:', error); - } + try { + const { user } = await Auth.signUp({ + username, + password, + attributes: { + email, // optional + phone_number, // optional - E.164 number convention + // other custom attributes + }, + autoSignIn: { // optional - enables auto sign in after user is confirmed + enabled: true, + } + }); + console.log(user); + } catch (error) { + console.log('error signing up:', error); + } } ``` @@ -30,9 +30,9 @@ The `Auth.signUp` promise returns a data object of type [`ISignUpResult`](https: ```js { - user: CognitoUser; - userConfirmed: boolean; - userSub: string; + user: CognitoUser; + userConfirmed: boolean; + userSub: string; } ``` @@ -43,12 +43,12 @@ If user didn't get a confirmation code, you can use `resendSignUp` function to s import { Auth } from 'aws-amplify'; async function resendConfirmationCode() { - try { - await Auth.resendSignUp(username); - console.log('code resent successfully'); - } catch (err) { - console.log('error resending code: ', err); - } + try { + await Auth.resendSignUp(username); + console.log('code resent successfully'); + } catch (err) { + console.log('error resending code: ', err); + } } ``` @@ -60,11 +60,11 @@ If you enabled multi-factor auth, confirm the sign-up after retrieving a confirm import { Auth } from 'aws-amplify'; async function confirmSignUp() { - try { - await Auth.confirmSignUp(username, code); - } catch (error) { - console.log('error confirming sign up', error); - } + try { + await Auth.confirmSignUp(username, code); + } catch (error) { + console.log('error confirming sign up', error); + } } ``` @@ -78,11 +78,11 @@ a newly created user. import { Auth } from 'aws-amplify'; async function confirmSignUp() { - try { - await Auth.confirmSignUp(username, code, { forceAliasCreation: false }); - } catch (error) { - console.log('error confirming sign up', error); - } + try { + await Auth.confirmSignUp(username, code, { forceAliasCreation: false }); + } catch (error) { + console.log('error confirming sign up', error); + } } ``` @@ -95,15 +95,15 @@ If authentication was successful, the event will contain `CognitoUser` in data o import { Hub } from 'aws-amplify'; function listenToAutoSignInEvent() { - Hub.listen('auth', ({ payload }) => { - const { event } = payload; - if (event === 'autoSignIn') { - const user = payload.data; - // assign user - } else if (event === 'autoSignIn_failure') { - // redirect to sign in page - } - }) + Hub.listen('auth', ({ payload }) => { + const { event } = payload; + if (event === 'autoSignIn') { + const user = payload.data; + // assign user + } else if (event === 'autoSignIn_failure') { + // redirect to sign in page + } + }) } ``` @@ -114,12 +114,12 @@ To create a custom attribute during your sign-up process, add it to the attribut ```js Auth.signUp({ - username, - password, - attributes: { - email, - 'custom:favorite_flavor': 'Cookie Dough' // custom attribute, not standard - } + username, + password, + attributes: { + email, + 'custom:favorite_flavor': 'Cookie Dough' // custom attribute, not standard + } }) ``` @@ -133,11 +133,11 @@ When signing in with user name and password, you will pass in the username and t import { Auth } from 'aws-amplify'; async function signIn() { - try { - const user = await Auth.signIn(username, password); - } catch (error) { - console.log('error signing in', error); - } + try { + const user = await Auth.signIn(username, password); + } catch (error) { + console.log('error signing in', error); + } } ``` @@ -147,11 +147,11 @@ async function signIn() { import { Auth } from 'aws-amplify'; async function signOut() { - try { - await Auth.signOut(); - } catch (error) { - console.log('error signing out: ', error); - } + try { + await Auth.signOut(); + } catch (error) { + console.log('error signing out: ', error); + } } ``` @@ -171,10 +171,10 @@ By doing this, you sign out users from all devices. It also invalidates all refr import { Auth } from 'aws-amplify'; async function signOut() { - try { - await Auth.signOut({ global: true }); - } catch (error) { - console.log('error signing out: ', error); - } + try { + await Auth.signOut({ global: true }); + } catch (error) { + console.log('error signing out: ', error); + } } ``` diff --git a/src/fragments/lib/auth/js/react-native-social.mdx b/src/fragments/lib/auth/js/react-native-social.mdx index 902530c4321..6d77a2787a9 100644 --- a/src/fragments/lib/auth/js/react-native-social.mdx +++ b/src/fragments/lib/auth/js/react-native-social.mdx @@ -83,23 +83,23 @@ For React Native applications, you need to define a custom URL scheme for your a - - - - - - CFBundleURLTypes - - - CFBundleURLSchemes - - myapp - - - - - - + + + + + + CFBundleURLTypes + + + CFBundleURLSchemes + + myapp + + + + + + ``` *React Native - Android - AndroidManifest.xml* diff --git a/src/fragments/lib/auth/js/react-native-withoauth.mdx b/src/fragments/lib/auth/js/react-native-withoauth.mdx index a9625597ceb..bdc9d73a134 100644 --- a/src/fragments/lib/auth/js/react-native-withoauth.mdx +++ b/src/fragments/lib/auth/js/react-native-withoauth.mdx @@ -36,36 +36,36 @@ import awsconfig from './aws-exports'; Amplify.configure(awsconfig); function App(props) { - const { - oAuthUser, - oAuthError, - hostedUISignIn, - facebookSignIn, - googleSignIn, - amazonSignIn, - customProviderSignIn, - signOut, - } = props; + const { + oAuthUser, + oAuthError, + hostedUISignIn, + facebookSignIn, + googleSignIn, + amazonSignIn, + customProviderSignIn, + signOut, + } = props; return ( - User: {oAuthUser ? JSON.stringify(oAuthUser.attributes) : 'None'} - {oAuthUser ? ( -