Skip to content

Commit e921476

Browse files
aaronpowellaaronpowell
committed
cutting the 1.0.0 release with GA
1 parent 2ff67cc commit e921476

File tree

7 files changed

+115
-28
lines changed

7 files changed

+115
-28
lines changed

‎CHANGELOG.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
# Changelog for `react-static-web-apps-auth`
22

3-
## [0.2.0]
3+
## [1.0.0]
44

55
### Added
66

7-
- Support for custom auth providers as per GA!
7+
- Support for custom auth providers as per GA
8+
- Support for Apple as a provider
9+
- Ability to override the label of the provider
10+
11+
### Changed
12+
13+
- Only AAD, GitHub and Twitter are enabled by default, matching the providers for free tier
814

915
## [0.1.7] - 2021-03-11
1016

‎example/src/App.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@ function App() {
4747
>
4848
Learn React
4949
</a>
50-
<StaticWebAuthLogins customProviders={[{ id: "okta", name: "Okta" }]} />
50+
<StaticWebAuthLogins
51+
customProviders={[{ id: "okta", name: "Okta" }]}
52+
label={(name) => `Do sign in ${name}`}
53+
/>
5154

5255
<UserInfoContextProvider>
5356
<UserDisplay />

‎react-static-web-apps-auth/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,20 @@ const Login = () => {
2525
return (
2626
<div>
2727
<h2>Login to our site</h2>
28-
<StaticWebAppsAuthLogins aad={false} customProviders={[ id: "okta", name: "Okta" ]} />
28+
<StaticWebAppsAuthLogins aad={true} twitter={false} customProviders={[ id: "okta", name: "Okta" ]} />
2929
</div>
3030
);
3131
};
3232
```
3333

3434
This component will display all the auth providers you want to use on your application and links for the user. Custom OIDC providers can be registered using the `customProviders` prop and provide the `id` of the provider and the `name` you want displayed to the user.
3535

36-
By default all auth providers will display, but they can be turned off by setting their corresponding prop to `false`.
36+
By default, only [managed auth providers](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization?WT.mc_id=javascript-12079-aapowell) will display, but they can be turned off by setting their corresponding prop to `false`. All providers available [as configurable options](https://docs.microsoft.com/azure/static-web-apps/authentication-custom?tabs=aad&WT.mc_id=javascript-12079-aapowell) can be enabled using props.
3737

3838
To redirect to a specific URL post-login, provide that path in the `postLoginRedirect` prop.
3939

40+
The default label is `Sign in using ${name}`, but can be overridden with the `label` prop, which takes a function that receives the `name` of the provider and returns the label string.
41+
4042
### `<UserInfoContextProvider>`
4143

4244
```typescript

‎react-static-web-apps-auth/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@aaronpowell/react-static-web-apps-auth",
3-
"version": "0.2.0",
3+
"version": "1.0.0",
44
"description": "A library to help creating authenticated React apps on Azure Static Web Apps",
55
"main": "build/index.js",
66
"types": "build/index.d.ts",

‎react-static-web-apps-auth/src/Login.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ const Login = ({
66
name,
77
id,
88
postLoginRedirect,
9+
label = (name) => `Sign in using ${name}`,
910
}: {
1011
name: string;
1112
id: AuthProviders;
1213
postLoginRedirect?: string;
14+
label?: (name: string) => string;
1315
}) => {
1416
return (
1517
<a
@@ -18,7 +20,7 @@ const Login = ({
1820
}`}
1921
className={`${id} login ${StaticWebAppsClassName}`}
2022
>
21-
Sign in using {name}
23+
{label(name)}
2224
</a>
2325
);
2426
};

‎react-static-web-apps-auth/src/StaticWebAuthLogins.tsx

Lines changed: 94 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import Login from "./Login";
33

4-
type CustomProvider = {
4+
export type CustomProvider = {
55
id: string;
66
name?: string;
77
};
@@ -12,70 +12,140 @@ export type LoginProviderProps = {
1212
twitter: boolean;
1313
github: boolean;
1414
google: boolean;
15+
apple: boolean;
1516
postLoginRedirect?: string;
1617
customProviders?: CustomProvider[];
18+
label?: (name: string) => string;
1719
};
1820

1921
type LoginProps = {
2022
postLoginRedirect?: string;
23+
label?: (name: string) => string;
2124
};
2225

23-
const AzureADLogin = ({ postLoginRedirect }: LoginProps) => (
24-
<Login name="Azure AD" id="aad" postLoginRedirect={postLoginRedirect} />
26+
const AzureADLogin = ({ postLoginRedirect, label }: LoginProps) => (
27+
<Login
28+
name="Azure AD"
29+
id="aad"
30+
postLoginRedirect={postLoginRedirect}
31+
label={label}
32+
/>
2533
);
26-
const FacebookLogin = ({ postLoginRedirect }: LoginProps) => (
27-
<Login name="Facebook" id="facebook" postLoginRedirect={postLoginRedirect} />
34+
const FacebookLogin = ({ postLoginRedirect, label }: LoginProps) => (
35+
<Login
36+
name="Facebook"
37+
id="facebook"
38+
postLoginRedirect={postLoginRedirect}
39+
label={label}
40+
/>
2841
);
29-
const TwitterLogin = ({ postLoginRedirect }: LoginProps) => (
30-
<Login name="Twitter" id="twitter" postLoginRedirect={postLoginRedirect} />
42+
const TwitterLogin = ({ postLoginRedirect, label }: LoginProps) => (
43+
<Login
44+
name="Twitter"
45+
id="twitter"
46+
postLoginRedirect={postLoginRedirect}
47+
label={label}
48+
/>
3149
);
32-
const GitHubLogin = ({ postLoginRedirect }: LoginProps) => (
33-
<Login name="GitHub" id="github" postLoginRedirect={postLoginRedirect} />
50+
const GitHubLogin = ({ postLoginRedirect, label }: LoginProps) => (
51+
<Login
52+
name="GitHub"
53+
id="github"
54+
postLoginRedirect={postLoginRedirect}
55+
label={label}
56+
/>
3457
);
35-
const GoogleLogin = ({ postLoginRedirect }: LoginProps) => (
36-
<Login name="Google" id="google" postLoginRedirect={postLoginRedirect} />
58+
const GoogleLogin = ({ postLoginRedirect, label }: LoginProps) => (
59+
<Login
60+
name="Google"
61+
id="google"
62+
postLoginRedirect={postLoginRedirect}
63+
label={label}
64+
/>
65+
);
66+
const AppleLogin = ({ postLoginRedirect, label }: LoginProps) => (
67+
<Login
68+
name="Apple"
69+
id="apple"
70+
postLoginRedirect={postLoginRedirect}
71+
label={label}
72+
/>
3773
);
3874

39-
const CustomProvider = ({
75+
const CustomProviderLogin = ({
4076
postLoginRedirect,
4177
id,
4278
name,
79+
label,
4380
}: LoginProps & CustomProvider) => (
44-
<Login name={name || id} id={id} postLoginRedirect={postLoginRedirect} />
81+
<Login
82+
name={name || id}
83+
id={id}
84+
postLoginRedirect={postLoginRedirect}
85+
label={label}
86+
/>
4587
);
4688

4789
const StaticWebAuthLogins = (props: LoginProviderProps) => {
4890
const providers: JSX.Element[] = [];
4991

5092
if (props.azureAD) {
5193
providers.push(
52-
<AzureADLogin postLoginRedirect={props.postLoginRedirect} />
94+
<AzureADLogin
95+
postLoginRedirect={props.postLoginRedirect}
96+
label={props.label}
97+
/>
98+
);
99+
}
100+
if (props.apple) {
101+
providers.push(
102+
<AppleLogin
103+
postLoginRedirect={props.postLoginRedirect}
104+
label={props.label}
105+
/>
53106
);
54107
}
55108
if (props.facebook) {
56109
providers.push(
57-
<FacebookLogin postLoginRedirect={props.postLoginRedirect} />
110+
<FacebookLogin
111+
postLoginRedirect={props.postLoginRedirect}
112+
label={props.label}
113+
/>
58114
);
59115
}
60116
if (props.twitter) {
61117
providers.push(
62-
<TwitterLogin postLoginRedirect={props.postLoginRedirect} />
118+
<TwitterLogin
119+
postLoginRedirect={props.postLoginRedirect}
120+
label={props.label}
121+
/>
63122
);
64123
}
65124
if (props.github) {
66-
providers.push(<GitHubLogin postLoginRedirect={props.postLoginRedirect} />);
125+
providers.push(
126+
<GitHubLogin
127+
postLoginRedirect={props.postLoginRedirect}
128+
label={props.label}
129+
/>
130+
);
67131
}
68132
if (props.google) {
69-
providers.push(<GoogleLogin postLoginRedirect={props.postLoginRedirect} />);
133+
providers.push(
134+
<GoogleLogin
135+
postLoginRedirect={props.postLoginRedirect}
136+
label={props.label}
137+
/>
138+
);
70139
}
71140

72141
if (props.customProviders) {
73142
for (const provider of props.customProviders) {
74143
providers.push(
75-
<CustomProvider
144+
<CustomProviderLogin
76145
name={provider.name}
77146
id={provider.id}
78147
postLoginRedirect={props.postLoginRedirect}
148+
label={props.label}
79149
key={provider.id}
80150
/>
81151
);
@@ -87,10 +157,11 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
87157

88158
StaticWebAuthLogins.defaultProps = {
89159
azureAD: true,
90-
facebook: true,
160+
facebook: false,
91161
twitter: true,
92162
github: true,
93-
google: true,
163+
google: false,
164+
apple: false,
94165
postLoginRedirect: "",
95166
};
96167

@@ -101,4 +172,6 @@ export {
101172
GitHubLogin,
102173
GoogleLogin,
103174
TwitterLogin,
175+
AppleLogin,
176+
CustomProviderLogin,
104177
};

‎react-static-web-apps-auth/src/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export type AuthProviders =
44
| "github"
55
| "google"
66
| "twitter"
7+
| "apple"
78
| string;

0 commit comments

Comments
 (0)