Skip to content
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

Update type for sample #6520

Merged
merged 9 commits into from
Dec 7, 2023
Merged

Update type for sample #6520

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
926648f
Update type for sample
elorzafe Nov 21, 2023
0c4e814
Merge branch 'main' into fix/authuser-type
elorzafe Nov 21, 2023
34abe87
fix code snippet for oauth flow
elorzafe Dec 5, 2023
afeb3aa
address PR comments
elorzafe Dec 6, 2023
83315c8
address pr comment
elorzafe Dec 6, 2023
f44d84b
Update index.mdx
elorzafe Dec 6, 2023
d0418bd
addressing PR comments
elorzafe Dec 6, 2023
8765fd2
Update src/pages/[platform]/build-a-backend/auth/add-social-provider/…
elorzafe Dec 6, 2023
e07191b
Update src/pages/[platform]/build-a-backend/auth/add-social-provider/…
elorzafe Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 137 additions & 96 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 @@ -407,23 +407,86 @@ After configuring the OAuth endpoints (with Cognito Hosted UI), you can integrat

A custom state is not required, but if you are looking to add one, you are able to do so by passing a string value (e.g. `signInWithRedirect({ customState: 'xyz' })`) and listening for the custom state via [Hub](/[platform]/build-a-backend/utilities/hub/). You can also use the Hub eventing system to catch errors using `signInWithRedirect()` to listen for the `signInWithRedirect_failure` event.

<InlineFilter filters={["javascript"]}>
<InlineFilter filters={["javascript", "angular", "vue"]}>
elorzafe marked this conversation as resolved.
Show resolved Hide resolved
elorzafe marked this conversation as resolved.
Show resolved Hide resolved
elorzafe marked this conversation as resolved.
Show resolved Hide resolved

<BlockSwitcher>
<Block name="TypeScript">

```ts
import React, { useEffect, useState } from "react";
import { Amplify } from "aws-amplify";
import { Hub } from "aws-amplify/utils";
import { signInWithRedirect, signOut, getCurrentUser } from "aws-amplify/auth";
import { AuthUser } from "aws-amplify/auth";
import config from './amplifyconfiguration.json';
import { signInWithRedirect, getCurrentUser, AuthUser } from "aws-amplify/auth";

Hub.listen("auth", ({ payload }) => {
switch (payload.event) {
case "signInWithRedirect":
const user = await getCurrentUser();
console.log(user.username);
break;
case "signInWithRedirect_failure":
// handle sign in failure
break;
elorzafe marked this conversation as resolved.
Show resolved Hide resolved
case "customOAuthState":
const state = payload.data; // this will be customState provided on signInWithRedirect function
console.log(state);
break;
}
});

Amplify.configure(config);
function handleSignInClick(customState: string) {
signInWithRedirect({
provider: "Google",
customState
});
}
```
</Block>
<Block name="JavaScript">

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

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

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

</Block>
</BlockSwitcher>

</InlineFilter>

<InlineFilter filters={["react", "nextjs"]}>

<BlockSwitcher>
<Block name="TypeScript">

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

function App() {
const [user, setUser] = useState<CognitoAuthUser | null>(null);
const [user, setUser] = useState<AuthUser | null>(null);
const [error, setError] = useState<unknown>(null);
const [customState, setCustomState] = useState<string | null>(null);

Expand All @@ -434,10 +497,10 @@ function App() {
getUser();
break;
case "signInWithRedirect_failure":
setError("An error has ocurred during the Oauth flow.");
setError("An error has ocurred during the OAuth flow.");
break;
case "customOAuthState":
setCustomState(payload.data);
setCustomState(payload.data); // this is the customState provided on signInWithRedirect function
break;
}
});
Expand All @@ -459,21 +522,22 @@ function App() {

return (
<div className="App">
<button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
<button onClick={() => signInWithRedirect({ provider: "Facebook" })}>
<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" })}>
<button onClick={() => signInWithRedirect({ provider: "Google", customState: "shopping-cart" })}>
Open Google
</button>
<button onClick={() => signInWithRedirect({ provider: "Amazon" })}>
<button onClick={() => signInWithRedirect({ provider: "Amazon", customState: "shopping-cart" })}>
Open Amazon
</button>
<button onClick={() => signInWithRedirect({ provider: "Apple" })}>
<button onClick={() => signInWithRedirect({ provider: "Apple", customState: "shopping-cart" })}>
Open Apple
</button>
<button onClick={() => signOut()}>Sign Out</button>
<div>{user?.username}</div>
<div>{customState}</div>
</div>
);
}
Expand All @@ -483,30 +547,26 @@ function App() {
<Block name="JavaScript">

```javascript
import React, { useEffect, useState } from 'react';
import { Amplify } from 'aws-amplify';
import { Hub } from 'aws-amplify/utils';
import { signInWithRedirect, signOut, getCurrentUser } from 'aws-amplify/auth';
import config from './amplifyconfiguration.json';

Amplify.configure(config);
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 ocurred during the Oauth flow.');
case "signInWithRedirect_failure":
setError("An error has ocurred during the OAuth flow.");
break;
case 'customOAuthState':
setCustomState(payload.data);
case "customOAuthState":
setCustomState(payload.data); // this is the customState provided on signInWithRedirect function
break;
}
});
Expand All @@ -522,27 +582,28 @@ 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()}>Open Hosted UI</button>
<button onClick={() => signInWithRedirect({ provider: 'Facebook' })}>
<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' })}>
<button onClick={() => signInWithRedirect({ provider: "Google", customState: "shopping-cart" })}>
Open Google
</button>
<button onClick={() => signInWithRedirect({ provider: 'Amazon' })}>
<button onClick={() => signInWithRedirect({ provider: "Amazon", customState: "shopping-cart" })}>
Open Amazon
</button>
<button onClick={() => signInWithRedirect({ provider: 'Apple' })}>
<button onClick={() => signInWithRedirect({ provider: "Apple", customState: "shopping-cart" })}>
Open Apple
</button>
<button onClick={() => signOut()}>Sign Out</button>
<div>{user?.username}</div>
<div>{customState}</div>
</div>
);
}
Expand All @@ -559,18 +620,19 @@ function App() {
<Block name="TypeScript">
elorzafe marked this conversation as resolved.
Show resolved Hide resolved

```ts
import { useEffect, useState } from "react";
import { Text, View, Linking, Button } from "react-native";
import { Amplify } from "aws-amplify";
import { Hub } from "aws-amplify/utils";
import { signInWithRedirect, signOut, getCurrentUser } from "aws-amplify/auth";
import { AuthUser } from "aws-amplify/auth";
import config from './amplifyconfiguration.json';
import React, { useEffect, useState } from "react";
import {
Button,
SafeAreaView,
Text,
} from "react-native";

Amplify.configure(config);
import { AuthUser, getCurrentUser, signInWithRedirect, signOut } from "aws-amplify/auth";
import { Hub } from "@aws-amplify/core";

function App() {
const [user, setUser] = useState<CognitoAuthUser | null>(null);

function App(): JSX.Element {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

: JSX.Elementnot needed I think

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got that when using react-native CLI

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking of enabling forcing return types in Amplify JS repo :P

const [user, setUser] = useState<AuthUser | null>(null);
const [error, setError] = useState<unknown>(null);
const [customState, setCustomState] = useState<string | null>(null);

Expand All @@ -581,10 +643,10 @@ function App() {
getUser();
break;
case "signInWithRedirect_failure":
setError("An error has ocurred during the oauth flow.");
setError("An error has ocurred during the OAuth flow.");
break;
case "customOAuthState":
setCustomState(payload.data);
setCustomState(payload.data); // this is the customState provided on signInWithRedirect function
break;
}
});
Expand All @@ -593,7 +655,7 @@ function App() {

return unsubscribe;
}, []);

const getUser = async (): Promise<void> => {
try {
const currentUser = await getCurrentUser();
Expand All @@ -605,23 +667,12 @@ function App() {
};

return (
<div className="App">
<button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
<button onClick={() => signInWithRedirect({ provider: "Facebook" })}>
Open Facebook
</button>
<button onClick={() => signInWithRedirect({ provider: "Google" })}>
Open Google
</button>
<button onClick={() => signInWithRedirect({ provider: "Amazon" })}>
Open Amazon
</button>
<button onClick={() => signInWithRedirect({ provider: "Apple" })}>
Open Apple
</button>
<button onClick={() => signOut()}>Sign Out</button>
<div>{user?.username}</div>
</div>
<SafeAreaView>
<Button title="Sign In" onPress={() => signInWithRedirect({ customState: "shopping-cart"})}></Button>
<Text>{user?.username}</Text>
<Text>{customState}</Text>
<Button title="Sign Out" onPress={() => signOut()}></Button>
</SafeAreaView>
);
}
```
Expand All @@ -630,30 +681,31 @@ function App() {
<Block name="JavaScript">

```javascript
import { useEffect, useState } from 'react';
import { Text, View, Linking, Button } from 'react-native';
import { Amplify } from 'aws-amplify';
import { Hub } from 'aws-amplify/utils';
import { signInWithRedirect, signOut, getCurrentUser } from 'aws-amplify/auth';
import config from './amplifyconfiguration.json';
import React, { useEffect, useState } from "react";
import {
Button,
SafeAreaView,
Text,
} from "react-native";

Amplify.configure(config);
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":
elorzafe marked this conversation as resolved.
Show resolved Hide resolved
getUser();
break;
case 'signInWithRedirect_failure':
setError('An error has ocurred during the Oauth flow.');
case "signInWithRedirect_failure":
setError("An error has ocurred during the OAuth flow.");
break;
case 'customOAuthState':
case "customOAuthState":
setCustomState(payload.data);
break;
}
Expand All @@ -663,35 +715,24 @@ 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 (
<div className="App">
<button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
<button onClick={() => signInWithRedirect({ provider: 'Facebook' })}>
Open Facebook
</button>
<button onClick={() => signInWithRedirect({ provider: 'Google' })}>
Open Google
</button>
<button onClick={() => signInWithRedirect({ provider: 'Amazon' })}>
Open Amazon
</button>
<button onClick={() => signInWithRedirect({ provider: 'Apple' })}>
Open Apple
</button>
<button onClick={() => signOut()}>Sign Out</button>
<div>{user?.username}</div>
</div>
<SafeAreaView>
<Button title="Sign In" onPress={() => signInWithRedirect({ customState: "shopping-cart"})}></Button>
<Text>{user?.username}</Text>
<Text>{customState}</Text>
<Button title="Sign Out" onPress={() => signOut()}></Button>
</SafeAreaView>
);
}
```
Expand Down Expand Up @@ -766,7 +807,7 @@ Amplify.configure({
});

function App() {
const [user, setUser] = useState<CognitoAuthUser | null>(null);
const [user, setUser] = useState<AuthUser | null>(null);
const [error, setError] = useState<unknown>(null);
const [customState, setCustomState] = useState<string | null>(null);

Expand Down
Loading