diff --git a/docs/auth/index.md b/docs/auth/index.md
index 5188d7e2a4..de579d039a 100644
--- a/docs/auth/index.md
+++ b/docs/auth/index.md
@@ -112,9 +112,16 @@ const app = createApp({
});
```
-You can also use the `providers` prop to enable multiple sign-in methods, for example
+:::note Note
-- allowing guest access:
+You can configure sign-in to use a redirect flow with no pop-up by adding
+`enableExperimentalRedirectFlow: true` to the root of your `app-config.yaml`
+
+:::
+
+### Using Multiple Providers
+
+You can also use the `providers` prop to enable multiple sign-in methods, for example to allow guest access:
```tsx title="packages/app/src/App.tsx"
const app = createApp({
@@ -140,12 +147,53 @@ const app = createApp({
});
```
-:::note Note
+### Conditionally Render Sign In Provider
-You can configure sign-in to use a redirect flow with no pop-up by adding
-`enableExperimentalRedirectFlow: true` to the root of your `app-config.yaml`
+In the above example you have both Guest and GitHub sign-in options, this is helpful for non-production but in Production you will most likely not want to offer Guest access. You can easily use information from your config to help conditionally render the provider:
-:::
+```tsx title="packages/app/src/App.tsx"
+import {
+ configApiRef,
+ githubAuthApiRef,
+ useApi,
+} from '@backstage/core-plugin-api';
+
+const app = createApp({
+ components: {
+ SignInPage: props => {
+ const configApi = useApi(configApiRef);
+ if (configApi.getString('auth.environment') === 'development') {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ },
+ },
+ // ..
+});
+```
## Sign-In with Proxy Providers