Skip to content

Commit

Permalink
fix(docs): OAuth instructions layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@ubbe-xyz
ubbe-xyz committed Nov 21, 2024
1 parent 9411046 commit 386804b
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 35 deletions.
7 changes: 7 additions & 0 deletions docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export function SetupCode({ providerId, providerName, highlight }: Props) {
data-copy=""
data-language="tsx"
icon={TSIcon}
className="px-4"
dangerouslySetInnerHTML={{
__html: highlight(`
import NextAuth from "next-auth"
Expand All @@ -40,6 +41,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand All @@ -57,6 +59,7 @@ export const { GET, POST } = handlers
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand All @@ -78,6 +81,7 @@ export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$({
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand All @@ -98,6 +102,7 @@ export const { handle, signIn } = SvelteKitAuth({
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`export { handle } from "./auth"`),
Expand All @@ -113,6 +118,7 @@ export const { handle, signIn } = SvelteKitAuth({
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand All @@ -134,6 +140,7 @@ export const load: LayoutServerLoad = async (event) => {
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand Down
7 changes: 7 additions & 0 deletions docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export function SignInCode({ providerId, providerName, highlight }: Props) {
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand All @@ -43,10 +44,12 @@ export default function SignIn() {
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
"use client"
import { signIn } from "next-auth/react"
export default function SignIn() {
Expand All @@ -64,6 +67,7 @@ export default function SignIn() {
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
Expand Down Expand Up @@ -107,6 +111,7 @@ export default component$(() => {
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
data-filename="src/routes/+page.svelte"
dangerouslySetInnerHTML={{
Expand All @@ -131,6 +136,7 @@ export default component$(() => {
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
data-filename="src/routes/signin/+page.server.ts"
dangerouslySetInnerHTML={{
Expand All @@ -148,6 +154,7 @@ export const actions: Actions = { default: signIn }
data-theme="default"
data-copy=""
data-language="tsx"
className="px-4"
icon={TSIcon}
data-filename="src/routes/+page.svelte"
dangerouslySetInnerHTML={{
Expand Down
21 changes: 19 additions & 2 deletions docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,29 @@
interface Props {
children: React.ReactNode
count: number
}

export function StepTitle({ children }: Props) {
export function StepTitle({ children, count }: Props) {
return (
<h3
className={`mt-8 text-2xl font-semibold tracking-tight text-slate-900 before:!-mt-[1px] before:flex before:items-center before:justify-center dark:text-slate-100`}
className={`relative mt-8 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100`}
>
<span
className="absolute rounded-full"
style={{
left: "-2.65rem",
color: "#a3a3a3",
backgroundColor: "#f3f4f6",
top: "52%",
transform: "translateY(-50%)",
fontSize: "1rem",
width: "33px",
height: "33px",
textAlign: "center",
}}
>
{count}
</span>
{children}
</h3>
)
Expand Down
76 changes: 43 additions & 33 deletions docs/components/OAuthProviderInstructions/content/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
)}
>
{/* Step 1 */}
<StepTitle>Register OAuth App in {providerName}'s dashboard</StepTitle>
<StepTitle count={1}>
Register OAuth App in {providerName}'s dashboard
</StepTitle>
<p className="mt-6 leading-7 first:mt-0">
First you have to setup an OAuth application on the {providerName}{" "}
developers dashboard.
Expand Down Expand Up @@ -115,7 +117,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
environment(s).
</Callout>
{/* Step 2 */}
<StepTitle>Setup Environment Variables</StepTitle>
<StepTitle count={2}>Setup Environment Variables</StepTitle>
<p className="mt-6 leading-7 first:mt-0">
Once registered, you should receive a{" "}
{manifest.requiresIssuer.includes(providerId) ? (
Expand All @@ -132,40 +134,48 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
</p>
<Code>
<Code.Next>
<Pre
data-copy=""
data-filename=".env.local"
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
<Pre data-copy="" data-filename=".env.local">
<div className="px-4">
<div
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
</div>
</Pre>
</Code.Next>
<Code.Qwik>
<Pre
data-copy=""
data-filename=".env"
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
<Pre data-copy="" data-filename=".env">
<div className="px-4">
<div
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
</div>
</Pre>
</Code.Qwik>
<Code.Svelte>
<Pre
data-copy=""
data-filename=".env"
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
<Pre data-copy="" data-filename=".env">
<div className="px-4">
<div
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
</div>
</Pre>
</Code.Svelte>
<Code.Express>
<Pre
data-copy=""
data-filename=".env"
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
<Pre data-copy="" data-filename=".env">
<div className="px-4">
<div
dangerouslySetInnerHTML={{
__html: highlight(envString),
}}
/>
</div>
</Pre>
<p className="mt-2 leading-7 first:mt-0">
Assuming{" "}
<Link href="https://www.npmjs.com/package/dotenv">
Expand All @@ -188,7 +198,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
if needed, but then you’ll need to pass them to the provider manually.
</p>
{/* Step 3 */}
<StepTitle>Setup Provider</StepTitle>
<StepTitle count={3}>Setup Provider</StepTitle>
<p className="mt-6 leading-7 first:mt-0">
Let’s enable {providerName} as a sign in option in our Auth.js
configuration. You’ll have to import the <NXCode>{providerName}</NXCode>{" "}
Expand All @@ -201,7 +211,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
highlight={highlight}
/>
{/* Step 4 */}
<StepTitle>Add Signin Button</StepTitle>
<StepTitle count={4}>Add Signin Button</StepTitle>
<p className="mt-6 leading-7 first:mt-0">
Next, we can add a signin button somewhere in your application like the
Navbar. It will trigger Auth.js sign in when clicked.
Expand All @@ -212,7 +222,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
highlight={highlight}
/>
{/* Step 5 */}
<StepTitle>Ship it!</StepTitle>
<StepTitle count={5}>Ship it!</StepTitle>
<p className="mt-6 leading-7 first:mt-0">
Click the “Sign in with {providerName}" button and if all went well, you
should be redirected to {providerName} and once authenticated,
Expand Down

0 comments on commit 386804b

Please sign in to comment.