gib/T3-Template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Committing to hopefully figure out why photos aren't working in next.js

Browse Source
This commit is contained in:
Gabriel Brown
2025-06-04 23:16:12 -05:00
parent f51e78ed2f
commit 3e0c23054a
12 changed files with 80 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -60,5 +60,5 @@
"ct3aMetadata": {
"initVersion": "7.39.3"
},
"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
"packageManager": "pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912"
}

0
public/favicon-96x96.png → public/favicon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

19
public/icons/apple.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-1.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>apple [#173]</title>
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-102.000000, -7439.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M57.5708873,7282.19296 C58.2999598,7281.34797 58.7914012,7280.17098 58.6569121,7279 C57.6062792,7279.04 56.3352055,7279.67099 55.5818643,7280.51498 C54.905374,7281.26397 54.3148354,7282.46095 54.4735932,7283.60894 C55.6455696,7283.69593 56.8418148,7283.03894 57.5708873,7282.19296 M60.1989864,7289.62485 C60.2283111,7292.65181 62.9696641,7293.65879 63,7293.67179 C62.9777537,7293.74279 62.562152,7295.10677 61.5560117,7296.51675 C60.6853718,7297.73474 59.7823735,7298.94772 58.3596204,7298.97372 C56.9621472,7298.99872 56.5121648,7298.17973 54.9134635,7298.17973 C53.3157735,7298.17973 52.8162425,7298.94772 51.4935978,7298.99872 C50.1203933,7299.04772 49.0738052,7297.68074 48.197098,7296.46676 C46.4032359,7293.98379 45.0330649,7289.44985 46.8734421,7286.3899 C47.7875635,7284.87092 49.4206455,7283.90793 51.1942837,7283.88393 C52.5422083,7283.85893 53.8153044,7284.75292 54.6394294,7284.75292 C55.4635543,7284.75292 57.0106846,7283.67793 58.6366882,7283.83593 C59.3172232,7283.86293 61.2283842,7284.09893 62.4549652,7285.8199 C62.355868,7285.8789 60.1747177,7287.09489 60.1989864,7289.62485" id="apple-[#173]">
</path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
public/icons/microsoft.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#F35325" d="M1 1h6.5v6.5H1V1z"/><path fill="#81BC06" d="M8.5 1H15v6.5H8.5V1z"/><path fill="#05A6F0" d="M1 8.5h6.5V15H1V8.5z"/><path fill="#FFBA08" d="M8.5 8.5H15V15H8.5V8.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

2
src/app/(auth-pages)/profile/page.tsx
View File

@ -81,7 +81,7 @@ const ProfilePage = () => {
}
return (
<div className='max-w-3xl min-w-sm md:min-w-lg mx-auto p-4'>
<div className='max-w-2xl min-w-sm mx-auto p-4'>
<Card className='mb-8'>
<CardHeader className='pb-2'>
<CardTitle className='text-2xl'>Your Profile</CardTitle>

10
src/app/(auth-pages)/sign-in/page.tsx
View File

@ -80,10 +80,10 @@ const Login = () => {
return (
<Card className='min-w-xs md:min-w-sm'>
<CardHeader>
<CardTitle className='text-2xl font-medium'>
<CardTitle className='text-3xl font-medium'>
Sign In
</CardTitle>
<CardDescription className='text-sm text-foreground'>
<CardDescription className='text-foreground'>
Don&apos;t have an account?{' '}
<Link className='font-medium underline' href='/sign-up'>
Sign up
@ -101,7 +101,7 @@ const Login = () => {
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormLabel className='text-lg'>Email</FormLabel>
<FormControl>
<Input type='email' placeholder='you@example.com' {...field} />
</FormControl>
@ -116,7 +116,7 @@ const Login = () => {
render={({ field }) => (
<FormItem>
<div className='flex justify-between'>
<FormLabel>Password</FormLabel>
<FormLabel className='text-lg'>Password</FormLabel>
<Link
className='text-xs text-foreground underline text-right'
href='/forgot-password'
@ -142,6 +142,7 @@ const Login = () => {
<SubmitButton
disabled={isLoading}
pendingText='Signing In...'
className='text-[1.0rem] cursor-pointer'
>
Sign in
</SubmitButton>
@ -149,7 +150,6 @@ const Login = () => {
</Form>
<Separator className='my-4' />
<SignInWithMicrosoft />
<Separator className='my-4' />
<SignInWithApple />
</CardContent>
</Card>

15
src/app/(auth-pages)/sign-up/page.tsx
View File

@ -97,10 +97,10 @@ const SignUp = () => {
return (
<Card className='min-w-xs md:min-w-sm'>
<CardHeader>
<CardTitle className='text-2xl font-medium'>
<CardTitle className='text-3xl font-medium'>
Sign Up
</CardTitle>
<CardDescription className='text text-foreground'>
<CardDescription className='text-foreground'>
Already have an account?{' '}
<Link className='text-primary font-medium underline' href='/sign-in'>
Sign in
@ -115,7 +115,7 @@ const SignUp = () => {
name='name'
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormLabel className='text-lg'>Name</FormLabel>
<FormControl>
<Input type='text' placeholder='Full Name' {...field} />
</FormControl>
@ -127,7 +127,7 @@ const SignUp = () => {
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormLabel className='text-lg'>Email</FormLabel>
<FormControl>
<Input type='email' placeholder='you@example.com' {...field} />
</FormControl>
@ -140,7 +140,7 @@ const SignUp = () => {
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormLabel className='text-lg'>Password</FormLabel>
<FormControl>
<Input type='password' placeholder='Your password' {...field} />
</FormControl>
@ -153,7 +153,7 @@ const SignUp = () => {
name='confirmPassword'
render={({ field }) => (
<FormItem>
<FormLabel>Confirm Password</FormLabel>
<FormLabel className='text-lg'>Confirm Password</FormLabel>
<FormControl>
<Input type='password' placeholder='Confirm password' {...field} />
</FormControl>
@ -170,10 +170,11 @@ const SignUp = () => {
: <StatusMessage message={{ success: statusMessage }} />
)}
<SubmitButton
className='text-[1.0rem] cursor-pointer'
disabled={isLoading}
pendingText='Signing Up...'
>
Sign up
Sign Up
</SubmitButton>
</form>
</Form>

2
src/app/layout.tsx
View File

@ -42,7 +42,7 @@ export const metadata: Metadata = {
{ url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
{ url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16'},
{ url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32'},
{ url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96'},
{ url: '/favicon.png', type: 'image/png', sizes: '96x96'},
{ url: '/favicon.ico', type: 'image/x-icon', sizes: 'any', media: '(prefers-color-scheme: dark)' },
{ url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16', media: '(prefers-color-scheme: dark)' },
{ url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32', media: '(prefers-color-scheme: dark)' },

15
src/components/default/auth/SignInWithApple.tsx
View File

@ -38,16 +38,23 @@ export const SignInWithApple = () => {
};
return (
<form onSubmit={handleSignInWithApple}>
<form
onSubmit={handleSignInWithApple}
className='my-4'
>
<SubmitButton
className='w-full cursor-pointer'
disabled={isLoading || isSigningIn}
pendingText='Redirecting...'
type="submit"
>
<div className='flex items-center gap-3'>
<Image src='/icons/apple.png' alt='Apple logo' className='text-white' width={20} height={20} />
<p>Sign in with Apple</p>
<div className='flex items-center gap-2'>
<Image src='/icons/apple.svg'
alt='Apple logo'
className='invert-75 dark:invert-25'
width={22} height={22}
/>
<p className='text-[1.0rem]'>Sign in with Apple</p>
</div>
</SubmitButton>
{statusMessage && (

9
src/components/default/auth/SignInWithMicrosoft.tsx
View File

@ -38,7 +38,10 @@ export const SignInWithMicrosoft = () => {
};
return (
<form onSubmit={handleSignInWithMicrosoft}>
<form
onSubmit={handleSignInWithMicrosoft}
className='my-4'
>
<SubmitButton
className='w-full cursor-pointer'
disabled={isLoading || isSigningIn}
@ -46,8 +49,8 @@ export const SignInWithMicrosoft = () => {
type="submit"
>
<div className='flex items-center gap-2'>
<Image src='/icons/microsoft.png' alt='Microsoft logo' width={20} height={20} />
<p>Sign in with Microsoft</p>
<Image src='/icons/microsoft.svg' alt='Microsoft logo' width={20} height={20} />
<p className='text-[1.0rem]'>Sign in with Microsoft</p>
</div>
</SubmitButton>
{statusMessage && (

2
src/components/default/navigation/index.tsx
View File

@ -18,7 +18,7 @@ const Navigation = () => {
>
<div className='flex gap-5 items-center font-semibold'>
<Link className='flex flex-row my-auto gap-2' href='/'>
<Image src='/favicon-96x96.png' alt='T3 Logo' width={50} height={50} />
<Image src='/favicon.png' alt='T3 Logo' width={50} height={50} />
<h1 className='my-auto text-2xl'>T3 Supabase Template</h1>
</Link>
<div className='flex items-center gap-2'>

25
src/lib/hooks/auth.ts
View File

@ -60,6 +60,31 @@ export const signIn = async (
}
};
export const signInWithMicrosoft = async (): Promise<Result<string>> => {
const supabase = createClient();
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'azure',
options: {
scopes: 'openid, profile email offline_access',
}
});
if (error) return { success: false, error: error.message };
return { success: true, data: data.url};
};
export const signInWithApple = async (): Promise<Result<string>> => {
const supabase = createClient();
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'apple',
options: {
scopes: 'openid, profile email offline_access',
}
});
if (error) return { success: false, error: error.message };
return { success: true, data: data.url};
};
export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
const email = formData.get('email') as string;
const supabase = createClient();