Skip to content

first pass #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: lint-mdx-files-and-code-blocks
Choose a base branch
from
Open

first pass #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
4 changes: 3 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@
},
"rules": {
// for mdx shortcodes, and snippets
"react/jsx-no-undef": ["off"]
"react/jsx-no-undef": "off",
"react/no-unescaped-entities": "off",
"react-hooks/rules-of-hooks": "off"
}
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/pages/[platform]/build-a-backend/auth/accessing-credentials/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const getStaticPaths = async () => {
return getCustomStaticPath(meta.platforms);
};

export function getStaticProps(context) {
export function getStaticProps() {
return {
props: {
platform: context.params.platform,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/[platform]/build-a-backend/auth/add-sms-flows/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const getStaticPaths = async () => {
return getCustomStaticPath(meta.platforms);
};

export function getStaticProps(context) {
export function getStaticProps() {
return {
props: {
platform: context.params.platform,
Expand Down
144 changes: 89 additions & 55 deletions src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath';

export const meta = {
title: 'Add social provider sign-in',
description: 'Learn how to setup social sign-in providers like Facebook, Google, Amazon, or Sign in with Apple.',
description:
'Learn how to setup social sign-in providers like Facebook, Google, Amazon, or Sign in with Apple.',
platforms: [
'javascript',
'react-native',
Expand All @@ -16,18 +17,11 @@ export const meta = {
],
canonicalObjects: [
{
platforms: [
'vue',
'angular',
'javascript'
],
platforms: ['vue', 'angular', 'javascript'],
canonicalPath: '/javascript/build-a-backend/auth/add-social-provider/'
},
{
platforms: [
'react',
'nextjs'
],
platforms: ['react', 'nextjs'],
canonicalPath: '/react/build-a-backend/auth/add-social-provider/'
}
]
Expand All @@ -37,7 +31,7 @@ export const getStaticPaths = async () => {
return getCustomStaticPath(meta.platforms);
};

export function getStaticProps(context) {
export function getStaticProps() {
return {
props: {
platform: context.params.platform,
Expand Down Expand Up @@ -429,19 +423,19 @@ A custom state is not required, but if you are looking to add one, you are able
<Block name="TypeScript">

```ts
import { Hub } from "aws-amplify/utils";
import { signInWithRedirect, getCurrentUser, AuthUser } from "aws-amplify/auth";
import { Hub } from 'aws-amplify/utils';
import { signInWithRedirect, getCurrentUser, AuthUser } from 'aws-amplify/auth';

Hub.listen("auth", ({ payload }) => {
Hub.listen('auth', ({ payload }) => {
switch (payload.event) {
case "signInWithRedirect":
case 'signInWithRedirect':
const user = await getCurrentUser();
console.log(user.username);
break;
case "signInWithRedirect_failure":
case 'signInWithRedirect_failure':
// handle sign in failure
break;
case "customOAuthState":
case 'customOAuthState':
const state = payload.data; // this will be customState provided on signInWithRedirect function
console.log(state);
break;
Expand All @@ -450,11 +444,12 @@ Hub.listen("auth", ({ payload }) => {

function handleSignInClick(customState: string) {
signInWithRedirect({
provider: "Google",
provider: 'Google',
customState
});
}
```

</Block>
<Block name="JavaScript">

Expand Down Expand Up @@ -563,25 +558,25 @@ function App() {
<Block name="JavaScript">

```javascript
import React, { useEffect, useState } from "react";
import { Hub } from "aws-amplify/utils";
import { signInWithRedirect, signOut, getCurrentUser } from "aws-amplify/auth";
import React, { useEffect, useState } from 'react';
import { Hub } from 'aws-amplify/utils';
import { signInWithRedirect, signOut, getCurrentUser } from 'aws-amplify/auth';

function App() {
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
const [customState, setCustomState] = useState(null);

useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload }) => {
const unsubscribe = Hub.listen('auth', ({ payload }) => {
switch (payload.event) {
case "signInWithRedirect":
case 'signInWithRedirect':
getUser();
break;
case "signInWithRedirect_failure":
setError("An error has occurred during the OAuth flow.");
case 'signInWithRedirect_failure':
setError('An error has occurred during the OAuth flow.');
break;
case "customOAuthState":
case 'customOAuthState':
setCustomState(payload.data); // this is the customState provided on signInWithRedirect function
break;
}
Expand All @@ -598,23 +593,55 @@ function App() {
setUser(currentUser);
} catch (error) {
console.error(error);
console.log("Not signed in");
console.log('Not signed in');
}
};

return (
<div className="App">
<button onClick={() => signInWithRedirect({ customState: "shopping-cart"})}>Open Hosted UI</button>
<button onClick={() => signInWithRedirect({ provider: "Facebook", customState: "shopping-cart" })}>
<button
onClick={() => signInWithRedirect({ customState: 'shopping-cart' })}
>
Open Hosted UI
</button>
<button
onClick={() =>
signInWithRedirect({
provider: 'Facebook',
customState: 'shopping-cart'
})
}
>
Open Facebook
</button>
<button onClick={() => signInWithRedirect({ provider: "Google", customState: "shopping-cart" })}>
<button
onClick={() =>
signInWithRedirect({
provider: 'Google',
customState: 'shopping-cart'
})
}
>
Open Google
</button>
<button onClick={() => signInWithRedirect({ provider: "Amazon", customState: "shopping-cart" })}>
<button
onClick={() =>
signInWithRedirect({
provider: 'Amazon',
customState: 'shopping-cart'
})
}
>
Open Amazon
</button>
<button onClick={() => signInWithRedirect({ provider: "Apple", customState: "shopping-cart" })}>
<button
onClick={() =>
signInWithRedirect({
provider: 'Apple',
customState: 'shopping-cart'
})
}
>
Open Apple
</button>
<button onClick={() => signOut()}>Sign Out</button>
Expand Down Expand Up @@ -671,7 +698,7 @@ function App(): JSX.Element {

return unsubscribe;
}, []);

const getUser = async (): Promise<void> => {
try {
const currentUser = await getCurrentUser();
Expand All @@ -697,31 +724,27 @@ function App(): JSX.Element {
<Block name="JavaScript">

```javascript
import React, { useEffect, useState } from "react";
import {
Button,
SafeAreaView,
Text,
} from "react-native";
import React, { useEffect, useState } from 'react';
import { Button, SafeAreaView, Text } from 'react-native';

import { getCurrentUser, signInWithRedirect, signOut } from "aws-amplify/auth";
import { Hub } from "@aws-amplify/core";
import { getCurrentUser, signInWithRedirect, signOut } from 'aws-amplify/auth';
import { Hub } from '@aws-amplify/core';

function App() {
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
const [customState, setCustomState] = useState(null);

useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload }) => {
const unsubscribe = Hub.listen('auth', ({ payload }) => {
switch (payload.event) {
case "signInWithRedirect":
case 'signInWithRedirect':
getUser();
break;
case "signInWithRedirect_failure":
setError("An error has occurred during the OAuth flow.");
case 'signInWithRedirect_failure':
setError('An error has occurred during the OAuth flow.');
break;
case "customOAuthState":
case 'customOAuthState':
setCustomState(payload.data);
break;
}
Expand All @@ -731,20 +754,23 @@ function App() {

return unsubscribe;
}, []);

const getUser = async () => {
try {
const currentUser = await getCurrentUser();
setUser(currentUser);
} catch (error) {
console.error(error);
console.log("Not signed in");
console.log('Not signed in');
}
};

return (
<SafeAreaView>
<Button title="Sign In" onPress={() => signInWithRedirect({ customState: "shopping-cart"})}></Button>
<Button
title="Sign In"
onPress={() => signInWithRedirect({ customState: 'shopping-cart' })}
></Button>
<Text>{user?.username}</Text>
<Text>{customState}</Text>
<Button title="Sign Out" onPress={() => signOut()}></Button>
Expand Down Expand Up @@ -974,10 +1000,18 @@ import 'aws-amplify/auth/enable-oauth-listener';

</Callout>

<Accordion eyebrow="Under the hood" headingLevel="4" title="Why Social Sign In needs to be explicitly handled for Multi-Page Applications">

When you import and use the `signInWithRedirect` function, it will add a listener as a side effect that will complete the social sign in when an end user is redirected back to your app. This works well in a single-page application but in a multi-page application, you might get redirected to a page that doesn't include the listener that was originally added as a side-effect. Hence you must include the specific OAuth listener on your login success page.

<Accordion
eyebrow="Under the hood"
headingLevel="4"
title="Why Social Sign In needs to be explicitly handled for Multi-Page Applications"
>
When you import and use the `signInWithRedirect` function, it will add a
listener as a side effect that will complete the social sign in when an end
user is redirected back to your app. This works well in a single-page
application but in a multi-page application, you might get redirected to a
page that doesn't include the listener that was originally added as a
side-effect. Hence you must include the specific OAuth listener on your login
success page.
</Accordion>

</InlineFilter>
Expand All @@ -991,10 +1025,10 @@ import { signInWithRedirect } from 'aws-amplify/auth';

const provider = {
custom: 'MyCustomOIDCProvider'
}
};

function handleSignInClick() {
signInWithRedirect({ provider })
signInWithRedirect({ provider });
}
```

Expand Down
Loading