Skip to content

Commit b9e76b1

Browse files
BinaryFiddlerBinaryFiddler
committed
apple sign in examples
1 parent 135d5a7 commit b9e76b1

File tree

5 files changed

+129
-3
lines changed

5 files changed

+129
-3
lines changed

‎common/constants.ts

+5
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,11 @@ export const TEMPLATE_EXAMPLES_FEATURES = [
260260
href: '/examples/features/authentication/google',
261261
label: 'Google authentication',
262262
},
263+
{
264+
name: 'Features ➝ authentication ➝ Apple to API key and optional session',
265+
href: '/examples/features/authentication/apple',
266+
label: 'Apple authentication',
267+
},
263268
{
264269
name: 'Features ➝ authentication ➝ forgot password',
265270
href: '/examples/features/authentication/forgot-password',

‎demos/modals/ModalAuthentication.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import OutsideElementEvent from '@system/detectors/OutsideElementEvent';
1414

1515
import { FormHeading, FormSubHeading, FormParagraph, InputLabel } from '@system/typography/forms';
1616
import { ModalComponent } from '@root/system/modals/ModalContext';
17+
import Apple from '@root/system/svg/social/Apple';
1718

1819
export interface ModalAuthenticationProps {
1920
active?: string;
@@ -111,12 +112,17 @@ const ModalAuthentication: ModalComponent<ModalAuthenticationProps> = (props) =>
111112
</Button>
112113
{loading ? null : (
113114
<Button loading={loading} href="https://api.internet.dev/authenticate-google?domain=REDIRECT_WIREFRAMES_INTERNET_DEV" style={{ marginTop: 16, width: '100%' }}>
114-
<Google height="16px" style={{ marginRight: 16 }} /> Sign in with Google
115+
<Google height="16px" style={{ marginRight: 12 }} /> Sign in with Google
116+
</Button>
117+
)}
118+
{loading ? null : (
119+
<Button loading={loading} href="https://api.internet.dev/authenticate-apple?domain=REDIRECT_WIREFRAMES_INTERNET_DEV" style={{ marginTop: 16, width: '100%' }}>
120+
<Apple height="16px" style={{ marginRight: 12 }} /> Sign in with Apple
115121
</Button>
116122
)}
117123
{loading ? null : (
118124
<Button visual loading={loading} style={{ marginTop: 16, width: '100%' }}>
119-
<Bluesky height="16px" style={{ marginRight: 16, color: '#0A7AFF' }} /> Sign in with Bluesky
125+
<Bluesky height="16px" style={{ marginRight: 12, color: '#0A7AFF' }} /> Sign in with Bluesky
120126
</Button>
121127
)}
122128
</div>

‎pages/examples/features/authentication/apple.tsx

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import * as React from 'react';
2+
import * as Server from '@common/server';
3+
import ActionItem from '@system/documents/ActionItem';
4+
import Button from '@system/Button';
5+
import Cookies from 'js-cookie';
6+
import GlobalModalManager from '@system/modals/GlobalModalManager';
7+
import KeyHeader from '@system/KeyHeader';
8+
import Page from '@components/Page';
9+
import ThinAppLayout from '@system/layouts/ThinAppLayout';
10+
import { FormHeading, FormParagraph, InputLabel } from '@system/typography/forms';
11+
12+
function ExampleAuthentication(props) {
13+
const [currentUser, setUser] = React.useState<Record<string, any> | null>(props.viewer);
14+
const [key, setKey] = React.useState<string>(props.sessionKey);
15+
const [loading, setLoading] = React.useState<boolean>(false);
16+
17+
if (props.viewer) {
18+
return (
19+
<Page
20+
title="wireframes.internet.dev ➝ features ➝ authentication ➝ you have a session"
21+
description="A lightweight website template to test our design system. You can view this template on GitHub and see how we write websites."
22+
url="https://wireframes.internet.dev/examples/features/authentication/apple"
23+
>
24+
<KeyHeader onInputChange={setKey} value={key} viewer={currentUser} />
25+
<ThinAppLayout>
26+
<FormHeading style={{ marginTop: 64 }}>You have a session</FormHeading>
27+
<FormParagraph>
28+
Would you like to sign out? This example demonstrates detecting whether you have a cookie and signing you in if you are the authenticated user.
29+
</FormParagraph>
30+
<FormParagraph>
31+
By signing out, your cookie and session key will be deleted, and you will have to reauthenticate. After clicking "Sign out," you will see the sign-in form again.
32+
</FormParagraph>
33+
<Button
34+
loading={loading}
35+
onClick={async () => {
36+
const confirm = window.confirm('Are you sure?');
37+
if (!confirm) {
38+
return;
39+
}
40+
41+
Cookies.remove('sitekey');
42+
window.location.reload();
43+
}}
44+
style={{ marginTop: 24, width: '100%' }}
45+
>
46+
Sign out
47+
</Button>
48+
<div style={{ marginTop: 16 }}>
49+
<ActionItem icon={`⭢`} href="/examples/features/settings">
50+
View settings
51+
</ActionItem>
52+
</div>
53+
</ThinAppLayout>
54+
<GlobalModalManager />
55+
</Page>
56+
);
57+
}
58+
59+
return (
60+
<Page
61+
title="wireframes.internet.dev ➝ features ➝ authentication ➝ apple"
62+
description="A lightweight website template to test our design system. You can view this template on GitHub and see how we write websites."
63+
url="https://wireframes.internet.dev/examples/features/authentication/apple"
64+
>
65+
<KeyHeader onInputChange={setKey} value={key} viewer={props.viewer} />
66+
<ThinAppLayout>
67+
<FormHeading style={{ marginTop: 64 }}>Sign in with Apple</FormHeading>
68+
<FormParagraph>Enhance your experience by signing in with Apple. Simply click the button below.</FormParagraph>
69+
<Button href="https://api.internet.dev/authenticate-apple?domain=REDIRECT_WIREFRAMES_INTERNET_DEV" style={{ marginTop: 24, width: '100%' }}>
70+
Sign in with Apple
71+
</Button>
72+
73+
{!currentUser ? (
74+
<>
75+
<FormParagraph style={{ marginTop: 32 }}>If you our Services through these wireframes you agree to the following: </FormParagraph>
76+
<div style={{ marginTop: 16 }}>
77+
<ActionItem icon={`⊹`} href="https://txt.dev/wwwjim/intdev-acceptable-use" target="_blank">
78+
Acceptable Use Policy
79+
</ActionItem>
80+
<ActionItem icon={`⊹`} href="https://txt.dev/wwwjim/intdev-terms-of-service" target="_blank">
81+
Terms of Service
82+
</ActionItem>
83+
<ActionItem icon={`⊹`} href="https://txt.dev/wwwjim/intdev-privacy-policy" target="_blank">
84+
Privacy Policy
85+
</ActionItem>
86+
</div>
87+
</>
88+
) : null}
89+
</ThinAppLayout>
90+
<GlobalModalManager />
91+
</Page>
92+
);
93+
}
94+
95+
export async function getServerSideProps(context) {
96+
const { sessionKey, viewer } = await Server.setup(context);
97+
98+
return {
99+
props: { sessionKey, viewer },
100+
};
101+
}
102+
103+
export default ExampleAuthentication;

‎pages/oauth.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function OAuthPage(props) {
1111
}
1212

1313
Cookies.set('sitekey', props.code, { secure: true });
14-
window.location.replace('/examples/features/authentication/google');
14+
window.location.replace(`/examples/features/authentication/${props.authProvider}`);
1515
});
1616

1717
return <div>Redirecting...</div>;
@@ -28,10 +28,12 @@ export async function getServerSideProps(context) {
2828
}
2929

3030
const code = Server.decrypt(String(context.query.key));
31+
const authProvider = context.query.authProvider;
3132

3233
return {
3334
props: {
3435
code,
36+
authProvider,
3537
},
3638
};
3739
}

‎system/svg/social/Apple.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Apple(props) {
2+
return (
3+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 0 844 1000">
4+
<path
5+
fill="#fff"
6+
d="M824.66636 779.30363c-15.12299 34.93724-33.02368 67.09674-53.7638 96.66374-28.27076 40.3074-51.4182 68.2078-69.25717 83.7012-27.65347 25.4313-57.2822 38.4556-89.00964 39.1963-22.77708 0-50.24539-6.4813-82.21973-19.629-32.07926-13.0861-61.55985-19.5673-88.51583-19.5673-28.27075 0-58.59083 6.4812-91.02193 19.5673-32.48053 13.1477-58.64639 19.9994-78.65196 20.6784-30.42501 1.29623-60.75123-12.0985-91.02193-40.2457-19.32039-16.8514-43.48632-45.7394-72.43607-86.6641-31.060778-43.7024-56.597041-94.37983-76.602609-152.15586C10.740416 658.44309 0 598.01283 0 539.50845c0-67.01648 14.481044-124.8172 43.486336-173.25401C66.28194 327.34823 96.60818 296.6578 134.5638 274.1276c37.95566-22.53016 78.96676-34.01129 123.1321-34.74585 24.16591 0 55.85633 7.47508 95.23784 22.166 39.27042 14.74029 64.48571 22.21538 75.54091 22.21538 8.26518 0 36.27668-8.7405 83.7629-26.16587 44.90607-16.16001 82.80614-22.85118 113.85458-20.21546 84.13326 6.78992 147.34122 39.95559 189.37699 99.70686-75.24463 45.59122-112.46573 109.4473-111.72502 191.36456.67899 63.8067 23.82643 116.90384 69.31888 159.06309 20.61664 19.56727 43.64066 34.69027 69.2571 45.4307-5.55531 16.11062-11.41933 31.54225-17.65372 46.35662zM631.70926 20.0057c0 50.01141-18.27108 96.70693-54.6897 139.92782-43.94932 51.38118-97.10817 81.07162-154.75459 76.38659-.73454-5.99983-1.16045-12.31444-1.16045-18.95003 0-48.01091 20.9006-99.39207 58.01678-141.40314 18.53027-21.27094 42.09746-38.95744 70.67685-53.0663C578.3158 9.00229 605.2903 1.31621 630.65988 0c.74076 6.68575 1.04938 13.37191 1.04938 20.00505z"
7+
/>
8+
</svg>
9+
);
10+
}

0 commit comments

Comments
 (0)