Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add redirectTo parameter for redirecting after sign in #7

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add redirectTo parameter for redirecting after sign in #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdbb3f0
Add redirectTo parameter for redirecting after sign in
christian-valadez Oct 14, 2021
e1e316b
Add redirectTo in TS
christian-valadez Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14,311 changes: 14,311 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,22 @@ const name = pkg.name
.replace(/-\w/g, m => m[1].toUpperCase())

export default {
input: "src/index.js",
output: [
{
file: pkg.module,
sourcemap: true,
format: "es",
},
{
file: pkg.main,
sourcemap: true,
format: "umd",
name,
},
],
plugins: [
svelte(),
resolve()
],
};
input: 'src/index.js',
output: [
{
file: pkg.module,
sourcemap: true,
format: 'es',
},
{
file: pkg.main,
sourcemap: true,
format: 'umd',
name,
},
],
plugins: [
svelte(),
resolve()
],
}
8 changes: 5 additions & 3 deletions src/Auth.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
export let socialButtonSize = 'medium'
export let providers = []
export let view = 'sign_in'
export let redirectTo

function setView(newView) {
view = newView
Expand All @@ -29,14 +30,15 @@
{socialButtonSize}
{socialColors}
{view}
{redirectTo}
/>

{#if view == 'sign_in' || view == 'sign_up'}
<EmailAuthView {supabaseClient} {view} {setView}/>
<EmailAuthView {supabaseClient} {view} {setView} {redirectTo} />
{:else if view == 'magic_link'}
<MagicLinkView {supabaseClient} {setView}/>
<MagicLinkView {supabaseClient} {setView} {redirectTo} />
{:else if view == 'forgotten_password'}
<ForgottenPasswordView {supabaseClient} {setView}/>
<ForgottenPasswordView {supabaseClient} {setView} {redirectTo} />
{/if}
</div>
</div>
Expand Down
25 changes: 17 additions & 8 deletions src/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,33 @@
import Icon from './Icon.svelte'

export let block = false
export let shadow = false
export let primary = false
export let size = 'tiny'
export let loading = false
export let icon = null
export let style = {}

$: styleString = Object.entries(style).map(([key, value]) => {
return `${key}: ${value}`
}).join(';')
$: styleString = Object.entries(style)
.map(([key, value]) => {
return `${key}: ${value}`
})
.join(';')
</script>

<button class:block class={size} class:primary style={styleString} on:click disabled={loading}>
<button
class:block
class={size}
class:primary
style={styleString}
on:click
disabled={loading}
>
{#if icon}
<span class="icon">
<Icon name={icon} size=21/>
<Icon name={icon} size="21" />
</span>
{/if}
<span><slot/></span>
<span><slot /></span>
</button>

<style>
Expand All @@ -38,7 +46,8 @@
align-items: center;
position: relative;
text-align: center;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
border-radius: 0.25rem;
Expand Down
55 changes: 43 additions & 12 deletions src/EmailAuthView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,37 @@
export let supabaseClient
export let view
export let setView
export let redirectTo

let error = '', message = '', loading = false, email = '', password = ''
let error = '',
message = '',
loading = false,
email = '',
password = ''

async function submit() {
error = ''
message = ''
loading = true

if (view == 'sign_up') {
const { error: signUpError } = await supabaseClient.auth.signUp({
email, password
})
const { error: signUpError } = await supabaseClient.auth.signUp(
{
email,
password,
},
{ redirectTo }
)

if (signUpError) error = signUpError.message
} else if (view == 'sign_in') {
const { error: signInError } = await supabaseClient.auth.signIn({
email, password
})
const { error: signInError } = await supabaseClient.auth.signIn(
{
email,
password,
},
{ redirectTo }
)

if (signInError) error = signInError.message
}
Expand All @@ -34,19 +47,37 @@
</script>

<form on:submit|preventDefault={submit}>
<Input name="email" type="email" label="Email address" icon="mail" bind:value={email}/>
<Input name="password" type="password" label="Password" icon="key" bind:value={password}/>
<Input
name="email"
type="email"
label="Email address"
icon="mail"
bind:value={email}
/>
<Input
name="password"
type="password"
label="Password"
icon="key"
bind:value={password}
/>

{#if view == 'sign_up'}
<Button block primary size="large" {loading} icon="inbox">Sign up</Button>
<div class="links">
<LinkButton on:click={() => setView('magic_link')}>Sign in with magic link</LinkButton>
<LinkButton on:click={() => setView('sign_in')}>Do you have an account? Sign in</LinkButton>
<LinkButton on:click={() => setView('magic_link')}
>Sign in with magic link</LinkButton
>
<LinkButton on:click={() => setView('sign_in')}
>Do you have an account? Sign in</LinkButton
>
</div>
{:else}
<Button block primary size="large" {loading} icon="inbox">Sign in</Button>
<div class="links">
<LinkButton on:click={() => setView('sign_up')}>Don't have an account? Sign up</LinkButton>
<LinkButton on:click={() => setView('sign_up')}
>Don't have an account? Sign up</LinkButton
>
</div>
{/if}

Expand Down
37 changes: 27 additions & 10 deletions src/ForgottenPasswordView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,47 @@

export let supabaseClient
export let setView
export let redirectTo

let error = '', message = '', loading = false, email = ''
let error = '',
message = '',
loading = false,
email = ''

async function submit() {
error = ''
message = ''
loading = true

const { error: err } = await supabaseClient.auth.api.resetPasswordForEmail(email)
const { error: err } = await supabaseClient.auth.api.resetPasswordForEmail(
email,
{
redirectTo,
}
)

if (err)
error = err.message
else
message = 'Check your email for the password reset link'
if (err) error = err.message
else message = 'Check your email for the password reset link'

loading = false
}
</script>

<form on:submit|preventDefault={submit}>
<Input name="email" type="email" label="Email address" placeholder="Your email address" icon="mail" bind:value={email}/>
<Button block primary size="large" {loading} icon="inbox">Send reset password instructions</Button>

<LinkButton on:click={() => setView('sign_in')}>Go back to sign in</LinkButton>
<Input
name="email"
type="email"
label="Email address"
placeholder="Your email address"
icon="mail"
bind:value={email}
/>
<Button block primary size="large" {loading} icon="inbox"
>Send reset password instructions</Button
>

<LinkButton on:click={() => setView('sign_in')}>Go back to sign in</LinkButton
>

{#if message}
<Text>{message}</Text>
Expand Down
36 changes: 26 additions & 10 deletions src/MagicLinkView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,46 @@

export let supabaseClient
export let setView
export let redirectTo

let error = '', message = '', loading = false, email = ''
let error = '',
message = '',
loading = false,
email = ''

async function submit() {
error = ''
message = ''
loading = true

const { error: err } = await supabaseClient.auth.signIn({ email })
const { error: err } = await supabaseClient.auth.signIn(
{ email },
{ redirectTo }
)

if (err)
error = err.message
else
message = 'Check your email for the magic link.'
if (err) error = err.message
else message = 'Check your email for the magic link.'

loading = false
}
</script>

<form on:submit|preventDefault={submit}>
<Input name="email" type="email" label="Email address" placeholder="Your email address" icon="mail" bind:value={email}/>
<Button block primary size="large" {loading} icon="inbox">Send magic link</Button>

<LinkButton on:click={() => setView('sign_in')}>Sign in with password</LinkButton>
<Input
name="email"
type="email"
label="Email address"
placeholder="Your email address"
icon="mail"
bind:value={email}
/>
<Button block primary size="large" {loading} icon="inbox"
>Send magic link</Button
>

<LinkButton on:click={() => setView('sign_in')}
>Sign in with password</LinkButton
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a couple formatting issues in this file.

If possible, can you submit the PR without formatting changes, just adding redirectTo and format parts that are effected by that change.

I'm OK with the formatting adjustments, but they should go in a separate PR, so we can make sure there is a prettierrc/eslint in place.


{#if message}
<Text>{message}</Text>
Expand Down
29 changes: 22 additions & 7 deletions src/SocialAuthView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
export let socialButtonSize
export let socialColors
export let view
export let redirectTo

let loading = false, error = ''
let loading = false,
error = ''

const buttonStyles = {
google: {
Expand Down Expand Up @@ -41,15 +43,18 @@
discord: {
'background-color': '#5865F2',
color: 'white',
}
},
}

$: hasProviders = providers && providers.length > 0

async function handleProviderSignIn(provider) {
loading = true

const { error: signInError } = await supabaseClient.auth.signIn({ provider })
const { error: signInError } = await supabaseClient.auth.signIn(
{ provider },
{ redirectTo }
)
if (signInError) error = signInError.message

loading = false
Expand All @@ -61,8 +66,17 @@

<div class="providers" class:horizontal={socialLayout == 'horizontal'}>
{#each providers as provider}
<Button block shadow icon={provider} size={socialButtonSize} style={socialColors ? buttonStyles[provider] : {}} on:click={() => handleProviderSignIn(provider)}>
{#if socialLayout == 'vertical'}{view == 'sign_up' ? 'Sign up' : 'Sign in'} with {provider}{/if}
<Button
block
shadow
icon={provider}
size={socialButtonSize}
style={socialColors ? buttonStyles[provider] : {}}
on:click={() => handleProviderSignIn(provider)}
>
{#if socialLayout == 'vertical'}{view == 'sign_up'
? 'Sign up'
: 'Sign in'} with {provider}{/if}
</Button>
{/each}
</div>
Expand Down Expand Up @@ -100,11 +114,12 @@
margin: 1rem;
}

.divider::before, .divider::after {
.divider::before,
.divider::after {
border-bottom-style: solid;
border-bottom-width: 1px;
top: 50%;
content: '';
content: "";
position: relative;
display: inline-block;
width: 50%;
Expand Down
1 change: 1 addition & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface AuthProps {
socialLayout?: "vertical" | "horizontal";
socialColors?: boolean;
socialButtonSize?: "medium" | "large";
redirectTo?: string;
}

export default class Auth extends SvelteComponentTyped<AuthProps> {}