Instantly share code, notes, and snippets.

Embed
What would you like to do?
Imagine the typical backend tasks for user authentication would exist right in the browser. How would the code look like? This is what I came up with. Forks & comments much appreciated! #nobackend #dreamcode
// sign up
account.signUp('joe@example.com', 'secret');
// sign in
account.signIn('joe@example.com', 'secret');
// sign in via oauth
account.signInWith('twitter');
// sign out
account.signOut();
// change password
account.changePassword('currentpassword', 'newpassword');
// change username
account.changeUsername('currentpassword', 'newusername');
// reset password
account.resetPassword('joe@example.com');
// destroy account and all its data
account.destroy('currentpassword');
// all methods could alternatively accept a parameter hash
// that would also allow for additional user info
account.signUp({
username: 'joe2000',
password: 'secret',
birthday: '1984-05-09',
email: 'joe@example.com'
});
// that would also allow for a general change method,
// that changeUsername or changePassword would simply
// be shortcuts for
account.change({
birthday: '1984-05-09',
});
account.change({
username: 'joe3000',
password: 'secret'
});
@matteocrippa

This comment has been minimized.

Show comment
Hide comment
@matteocrippa

matteocrippa Apr 26, 2013

Trying to test a signUp process where username is a required field we should act like this:

account.signUp('joe@example.com','secret');

then

account.changeUsername('currentpass','newusername');

Can't we add a third optional var for signUp in which we pass directly the username or an array with extra info?

Finally with reference to https://gist.github.com/gr2m/5463675 it think we should change signInWith with something like signInUsing

matteocrippa commented Apr 26, 2013

Trying to test a signUp process where username is a required field we should act like this:

account.signUp('joe@example.com','secret');

then

account.changeUsername('currentpass','newusername');

Can't we add a third optional var for signUp in which we pass directly the username or an array with extra info?

Finally with reference to https://gist.github.com/gr2m/5463675 it think we should change signInWith with something like signInUsing

@gr2m

This comment has been minimized.

Show comment
Hide comment
@gr2m

gr2m Apr 30, 2013

thanks for the input, @matteocrippa!

So you'd suggest something like this, right?

// sign up
account.signUp('joe@example.com', 'secret', {
  name: "Joe Doe",
  age: 30
});

That's interesting, I definitely see use cases for that. So if we have user properties, we'd also need a method to update these specifically I guess? Maybe

// load user settings
account.loadUserData() // loads all
account.loadUserData("name") // loads name setting

// update user settings
account.updateUserData({ name: "Jane Doe", age: 29 })
account.updateUserData( "name", "Jane Doe" })
Owner

gr2m commented Apr 30, 2013

thanks for the input, @matteocrippa!

So you'd suggest something like this, right?

// sign up
account.signUp('joe@example.com', 'secret', {
  name: "Joe Doe",
  age: 30
});

That's interesting, I definitely see use cases for that. So if we have user properties, we'd also need a method to update these specifically I guess? Maybe

// load user settings
account.loadUserData() // loads all
account.loadUserData("name") // loads name setting

// update user settings
account.updateUserData({ name: "Jane Doe", age: 29 })
account.updateUserData( "name", "Jane Doe" })
@2468ben

This comment has been minimized.

Show comment
Hide comment
@2468ben

2468ben May 2, 2013

Maybe if the "signIn" function handled signups too. Also, if you didn't have to worry about the performance costs of parsing a function name, I would love if things like 'changeUsername' called 'change' with 'username' as the first argument. I don't think it's better or worse, just offering another brainstorm.

//all the lines that are grouped together would act the same

account.signIn('currentusername', 'currentpassword')
account.signIn({username: 'currentusername', secret: 'currentpassword'})

account.signInUsing('twitter')
account.signIn({using: 'twitter'})

account.signOut()

account.changePassword('newpassword', 'currentpassword')
account.changePassword('newpassword', {secret: 'currentpassword'})
account.change('password', 'newpassword', {secret: 'currentpassword'})

account.changeUsername('newusername', 'currentpassword')
account.change('username', 'newusername', 'currentpassword')

account.resetPassword('currentusername')
account.resetPassword({username: 'currentusername'})

account.destroy()

account.signIn('currentusername', {name: 'Joe Doe', age: 30, secret: 'currentpassword'})

account.get()
account.get('name')
account.getName()

account.change({name: 'Jane Doe', age: 29})
account.change('name', 'Jane Doe')
account.changeName('Jane Doe')

2468ben commented May 2, 2013

Maybe if the "signIn" function handled signups too. Also, if you didn't have to worry about the performance costs of parsing a function name, I would love if things like 'changeUsername' called 'change' with 'username' as the first argument. I don't think it's better or worse, just offering another brainstorm.

//all the lines that are grouped together would act the same

account.signIn('currentusername', 'currentpassword')
account.signIn({username: 'currentusername', secret: 'currentpassword'})

account.signInUsing('twitter')
account.signIn({using: 'twitter'})

account.signOut()

account.changePassword('newpassword', 'currentpassword')
account.changePassword('newpassword', {secret: 'currentpassword'})
account.change('password', 'newpassword', {secret: 'currentpassword'})

account.changeUsername('newusername', 'currentpassword')
account.change('username', 'newusername', 'currentpassword')

account.resetPassword('currentusername')
account.resetPassword({username: 'currentusername'})

account.destroy()

account.signIn('currentusername', {name: 'Joe Doe', age: 30, secret: 'currentpassword'})

account.get()
account.get('name')
account.getName()

account.change({name: 'Jane Doe', age: 29})
account.change('name', 'Jane Doe')
account.changeName('Jane Doe')
@tapatio

This comment has been minimized.

Show comment
Hide comment
@tapatio

tapatio May 2, 2013

This is pretty awesome. Might incorporate this in my next project!

tapatio commented May 2, 2013

This is pretty awesome. Might incorporate this in my next project!

@matteocrippa

This comment has been minimized.

Show comment
Hide comment
@matteocrippa

matteocrippa May 6, 2013

@gr2m yep!

The idea of @2468ben is also interesting and allow the user to have a better readable code.
Also it allow you to have plugins or customization that can be used without any problem without having to re-rewrite a master function.

matteocrippa commented May 6, 2013

@gr2m yep!

The idea of @2468ben is also interesting and allow the user to have a better readable code.
Also it allow you to have plugins or customization that can be used without any problem without having to re-rewrite a master function.

@CodeMaxter

This comment has been minimized.

Show comment
Hide comment
@CodeMaxter

CodeMaxter May 10, 2013

// To verify if a user is sign in
account.isSignIn('joe@example.com');

CodeMaxter commented May 10, 2013

// To verify if a user is sign in
account.isSignIn('joe@example.com');

@gr2m

This comment has been minimized.

Show comment
Hide comment
@gr2m

gr2m May 10, 2013

@2468ben

this is awesome, lots of great ideas! I also thought about passing an object with {username, password} instead of two separate parameters to signIn for example.

I'm not sure if I'd merge signIn and signUp into one function. One reason that comes to my mind immediately: what if I just typed the username wrong? Would it create a new account right away?

@CodeMaxter

that's a great idea, the parameter could be optional to check:

// user is signed in
account.isSignedIn()

// user is signed in as joe@example.com
account.isSignedIn('joe@example.com')

@ALL

is there any way to enable notifications on gists commets / forks?

Owner

gr2m commented May 10, 2013

@2468ben

this is awesome, lots of great ideas! I also thought about passing an object with {username, password} instead of two separate parameters to signIn for example.

I'm not sure if I'd merge signIn and signUp into one function. One reason that comes to my mind immediately: what if I just typed the username wrong? Would it create a new account right away?

@CodeMaxter

that's a great idea, the parameter could be optional to check:

// user is signed in
account.isSignedIn()

// user is signed in as joe@example.com
account.isSignedIn('joe@example.com')

@ALL

is there any way to enable notifications on gists commets / forks?

@dmitriz

This comment has been minimized.

Show comment
Hide comment
@dmitriz

dmitriz May 15, 2013

I've never understood the reason to use 'username' instead of just 'email' and 'password'.
Leaving out email is looking for trouble, as there is no way to recover forgotten password without it.
Surprisingly, many sites and apps out there still leave the email optional.
And if 'email' is asked, forcing the user to come up with 'username' is unnecessary burden.
It is painful to make up when many usernames are already taken.
Then it is painful to remember. And then it is impossible to recover without email.
So basically 'usernames' are useless.
Did I miss anything?

dmitriz commented May 15, 2013

I've never understood the reason to use 'username' instead of just 'email' and 'password'.
Leaving out email is looking for trouble, as there is no way to recover forgotten password without it.
Surprisingly, many sites and apps out there still leave the email optional.
And if 'email' is asked, forcing the user to come up with 'username' is unnecessary burden.
It is painful to make up when many usernames are already taken.
Then it is painful to remember. And then it is impossible to recover without email.
So basically 'usernames' are useless.
Did I miss anything?

@gr2m

This comment has been minimized.

Show comment
Hide comment
@gr2m

gr2m May 15, 2013

Restrictions for usernames, e.g. only valid emails, is app specific. So in your case, signUp("joe", "secret") should fail with an error message, that "joe" is not a valid email address.

The actual API should not be affected by that.

Owner

gr2m commented May 15, 2013

Restrictions for usernames, e.g. only valid emails, is app specific. So in your case, signUp("joe", "secret") should fail with an error message, that "joe" is not a valid email address.

The actual API should not be affected by that.

@kybernetikos

This comment has been minimized.

Show comment
Hide comment
@kybernetikos

kybernetikos May 17, 2013

This stuff still seems to be thinking about the backend too much. In a nobackend system that I'm playing with in my spare time, I just delegate all of that to Mozilla persona. As a developer I don't want to care about signup. The developer code gets given the persona validated email address of the person signing in, and the hash of it (in case they want to send it to other users for displaying gravatars).

So the code I want to write is something like .login() / .logout() and .onLogin=.onLogout= . I really don't care about 'signup'.

kybernetikos commented May 17, 2013

This stuff still seems to be thinking about the backend too much. In a nobackend system that I'm playing with in my spare time, I just delegate all of that to Mozilla persona. As a developer I don't want to care about signup. The developer code gets given the persona validated email address of the person signing in, and the hash of it (in case they want to send it to other users for displaying gravatars).

So the code I want to write is something like .login() / .logout() and .onLogin=.onLogout= . I really don't care about 'signup'.

@zubairq

This comment has been minimized.

Show comment
Hide comment
@zubairq

zubairq Oct 16, 2013

Actually Clojure on Coils already lets front end only developers write full backend code securely without having to code the backend:

https://github.com/zubairq/coils

: see here for an actaul source file to see the login functionality calling SQL statements:

https://github.com/zubairq/coils/blob/master/src/webapp/client/views/loginpanel.cljs

zubairq commented Oct 16, 2013

Actually Clojure on Coils already lets front end only developers write full backend code securely without having to code the backend:

https://github.com/zubairq/coils

: see here for an actaul source file to see the login functionality calling SQL statements:

https://github.com/zubairq/coils/blob/master/src/webapp/client/views/loginpanel.cljs

@Stwissel

This comment has been minimized.

Show comment
Hide comment
@Stwissel

Stwissel Nov 27, 2013

With all the security breaches around I'd rather not maintain another set of username/passwords. How would it work when I want to use Facebook/Twitter/OAuth/SAML for signup/login?

Stwissel commented Nov 27, 2013

With all the security breaches around I'd rather not maintain another set of username/passwords. How would it work when I want to use Facebook/Twitter/OAuth/SAML for signup/login?

@gr2m

This comment has been minimized.

Show comment
Hide comment
@gr2m

gr2m Jun 12, 2014

@Stwissel

var provider = 'twitter' // can be what ever the backend supports, like 'google', 'facebook', etc
account.signInWith(provider);

It's already in the code above.

Owner

gr2m commented Jun 12, 2014

@Stwissel

var provider = 'twitter' // can be what ever the backend supports, like 'google', 'facebook', etc
account.signInWith(provider);

It's already in the code above.

@juanpastas

This comment has been minimized.

Show comment
Hide comment
@juanpastas

juanpastas Jul 5, 2014

what about:

account.attr = 'something'

Instead of change method? Breaks the order? I.e because account is a namespace for account functions?

juanpastas commented Jul 5, 2014

what about:

account.attr = 'something'

Instead of change method? Breaks the order? I.e because account is a namespace for account functions?

@evinw

This comment has been minimized.

Show comment
Hide comment
@evinw

evinw Aug 13, 2014

Great ideas!

evinw commented Aug 13, 2014

Great ideas!

@ma11hew28

This comment has been minimized.

Show comment
Hide comment
@jonohayon

This comment has been minimized.

Show comment
Hide comment
@jonohayon

jonohayon Dec 3, 2014

Hi!
I've created the signUp(email, password) function using Firebase.
You can see it in action here (and edit the code obviously): http://codepen.io/rezozo/pen/jEbQEL

-- Jonathan

jonohayon commented Dec 3, 2014

Hi!
I've created the signUp(email, password) function using Firebase.
You can see it in action here (and edit the code obviously): http://codepen.io/rezozo/pen/jEbQEL

-- Jonathan

@khanhtran

This comment has been minimized.

Show comment
Hide comment
@khanhtran

khanhtran Mar 13, 2015

How to add capcha support?

khanhtran commented Mar 13, 2015

How to add capcha support?

@iamtchelo

This comment has been minimized.

Show comment
Hide comment
@iamtchelo

iamtchelo Jun 23, 2015

WOW! This is amazing!

iamtchelo commented Jun 23, 2015

WOW! This is amazing!

@daslicht

This comment has been minimized.

Show comment
Hide comment
@daslicht

daslicht Nov 18, 2015

var u = new User(); // the User Class (ValueObject) can be reused for anything else 
      u.username ="joe2000";
      u.password = "secret";
      u.birthday = "1984-05-09";
      u.email = "joe@example.com"
Users.signUp(u);


And this all with full IntelliSense:
you just have to type u.
then hit ctrl+space
and the IDE shows you all possible values and you just have to choose them!
That way you can create your Objects and leave them alone.
You no longer have to remember any variable.

instead of a JSON Object where yopu have to remember or lookup possible object variables:

account.signUp({
  username: 'joe2000',
  password: 'secret',
  birthday: '1984-05-09',
  email: 'joe@example.com'
});

daslicht commented Nov 18, 2015

var u = new User(); // the User Class (ValueObject) can be reused for anything else 
      u.username ="joe2000";
      u.password = "secret";
      u.birthday = "1984-05-09";
      u.email = "joe@example.com"
Users.signUp(u);


And this all with full IntelliSense:
you just have to type u.
then hit ctrl+space
and the IDE shows you all possible values and you just have to choose them!
That way you can create your Objects and leave them alone.
You no longer have to remember any variable.

instead of a JSON Object where yopu have to remember or lookup possible object variables:

account.signUp({
  username: 'joe2000',
  password: 'secret',
  birthday: '1984-05-09',
  email: 'joe@example.com'
});
@sesam

This comment has been minimized.

Show comment
Hide comment
@sesam

sesam Nov 27, 2017

something like u = User().email('a@b.c').password('').sudo() could give me a window.user and if pass is wrong, just send an email that allows to sign in once, or change password + autosignin in the other window. Omittting .password() would make the signin code attempt to use whatever browser or other APIs available and fallback to the email-as-login approach. If browser has multiple possibilities like Persona, Oauths, SQRL, then a stored cookie is used to record stats on how succesful the approaches have been, to avoid begging for Facebook Oauth from someone who never used it before, but show it immediately to one who exclusively prefers it.

sesam commented Nov 27, 2017

something like u = User().email('a@b.c').password('').sudo() could give me a window.user and if pass is wrong, just send an email that allows to sign in once, or change password + autosignin in the other window. Omittting .password() would make the signin code attempt to use whatever browser or other APIs available and fallback to the email-as-login approach. If browser has multiple possibilities like Persona, Oauths, SQRL, then a stored cookie is used to record stats on how succesful the approaches have been, to avoid begging for Facebook Oauth from someone who never used it before, but show it immediately to one who exclusively prefers it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment