auth

wei 🌲 is 🌴 fe 🌳 Mar 12 🎋 2020

initial implementation

  • followed discover landing's login
  • provided fallback hatches
  • works for paid ads, SPACE, search admin with fallback hatches

higher-level implementation

  • participates in React components' lifecycles
  • useUser()
    • login()
    • logout()
    • loading
    • loginInfo

lower-level implementation

  • 4 async functions
    • isLoggedIn()
    • getLoginInfo()
    • goLogin()
    • goLogout()
  • window.fallbackFunctions()

app level assumptions

  • all pages need logging in
  • unauthorized status automatically triggers redirecting to login
  • future projects can follow today's implementation

note: those assumptions don't hold all the time

not customizable

all integrating with DL's back end

fully customizable

window.fallbackFunctions

it's kind of empty in middle, we don't want to make false assumptions about what kind of abstractions we want

followup requests

  • customize api path prefix
    has extra path prefix /feature-line/api
    copying all fns into fallback hatches is too much work
  • customize endpoints
    does not use the common /api prefix
    only providing path prefix won't be sufficient
  • align data schema

supported PATH_PREFIX

supported api endpoints

UI requests

  • supporting private and public pages
  • by default block rendering (with a spinner?) when API calls are pending

added skipAuth

adding...?

review these concepts

  • useUser()
    • loginInfo
    • loading
    • login()
    • logout()
  • fallback hatches
    • window.xxx
    • config.authentication
  • config.skipAuth
  • <EnsureLoggedIn />

and realize that

  • only DL is using the original implementation, everybody else is using fallback hatches
  • too many options to solve 1 problem
  • introducing too many concepts
  • we learned what people need to change in the fallback hatches

we need to stop this trend and reconsider the authentication component carefully

Proposing

@shopee/toastack-auth

  • separate package
  • Kaya Toast will depend on @shopee/toastack-auth for auth implementation, and support its features out-of-the-box
  • other systems can use this package to directly integrate authentication
  • further requests for BE integration goes directly into @shopee/toastack-auth

core APIs

  • <Authentication /> - app wrapper, provide app-level configuration
  • <EnsureLoggedIn /> - component authentication toggle and wrapper for UI customization
  • useUser() - imperative hook util

<Authentication

  • pathPrefix
  • endPoints
  • fallbackFunctions
  • (?) transferData

/>

// kaya toast core App component
import { Authenticate } from '@shopee/toastack-auth'; // or other names
// other imports omitted

const App = ({children, siteConfig}) => {
  return (
    <Authenticate
      pathPrefix="/api/v1"
      endpoints={{
        login: '/auth/info',
        logout: '/auth/logout',
      }}
      fallbackFunctions={/* omitted */}
      transferData={({ user }) => ({ loginInfo: user })}
    >
      <SiteContextProvider siteConfig={siteConfig}>
        {children}
      </SiteContextProvider>
    </Authenticate>
  )
}

<EnsureLoggedIn

  • LoadingUI
  • NotLoggedInUI

/>

  • wrapping page or component means wrapped component should be authenticated
  • refined control over what is authenticated
  • customizable UI
// page
import { EnsureLoggedIn } from '@shopee/toastack-auth'; // or other names

const PageUI = ({ greeting }) => <div>hello! {greeting}</div>;
const PageRequiresLogin = props => (
  <EnsureLoggedIn 
    UILoading={<Spin />}
    UINotLoggedIn={<svg />}
  >
    <PageUI />
  </EnsureLoggedIn />
);

export default PageRequiresLogin;

// widget
import { EnsureLoggedIn } from '@shopee/toastack-auth';
import { SideNav } from '@shopee/kaya-toast';

const SideNav = (props) => (
  <EnsureLoggedIn>
    <SideNav {...props} />
  </EnsureLoggedIn>
);

useUser()

  • will be transferred over to @shopee/toastack-auth
  • meant for imperatively render UI according to login state

Kaya Toast auth moving towards...

  • will integrate with the moved-out @shopee/toastack-auth
  • will try to minimize breaking change
    • re-export useUser()
    • keep original auth implementation
  • removing the fallback functions on window

not customizable

all integrating with DL's back end

fully customizable

window.fallbackFunctions

opinionatedly customizable

  • app wrapper: <Authentication />
  • component wrapper: <EnsureLoggedIn />
  • imperative hook: useUser()

next up

proposal

  • hear feedback about this proposal + look more closely current usages
  • actually implement this
  • integrate with Kaya Toast
  • further requests to integrate with different BE will go into this package (instead of Kaya Toast)

how you can contribute

  • suggest more expressive names 😅
  • let me know whether the proposed API fits your need
  • point me to the critical problems you face for your auth workflow
  • integrate with your back end

auth

By Wei Gao

Made with Slides.com

auth

  • 507

More from Wei Gao