Auth0 Web Header
Auth0's website and landings react component header
Installation
From npm client:
npm install --save auth0-web-header
From yarn client:
yarn add auth0-web-header
From CDN:
Usage
API
Props
Props | Type | Default | Description |
---|---|---|---|
className | string | '' | Applied to the header root element. |
children | node | null | Can be used to render custom menu items via React components. |
theme | string | 'light' | Header theme, another option is 'dark'. |
featuredEnable | boolean | true | Enable or disable featured link next to the Auth0 logo. |
featuredLink | string | '' | Featured link URI. |
featuredText | string | '' | Featured link text. |
loginButtonEnable | boolean | true | Enable or disable Login button. |
loginButtonLink | string | '' | Link of the Login button, if it's different from '' the Login button will be rendered as an anchor tag with this href. |
loginButtonOnClick | function | () => {} | Callback function for when Login button is clicked. |
loginButtonText | string | 'Log in' | Text of the Login button. |
talkToSalesButtonEnable | boolean | true | Talk to sales button link. |
talkToSalesButtonLink | string | '?contact=true' | Link of the Talk to sales button, if it's different from '' the Talk to sales button will be rendered as an anchor tag with this href. |
talkToSalesButtonOnClick | function | () => {} | Callback function for when Talk to sales button is clicked. |
talkToSalesButtonText | string | 'Talk to sales' | Text of the Talk to sales button. |
signupButtonEnable | boolean | true | Signup button link. |
signupButtonLink | string | '' | Link of the Signup button, if it's different from '' the Signup button will be rendered as an anchor tag with this href. |
signupButtonOnClick | function | () => {} | Callback function for when Signup button is clicked. |
signupButtonText | string | 'Sign up' | Text of the Signup button. |
Methods
Get a variant for the ribbon:
Auth0WebHeader
Example
Example of usage with lock
src/components/Header/index.js
mainLock = {} { thismainLock = lock: auth0ClientId auth0Domain options: icon: auth0IconUrl callbackURL: auth0CallbackUrl rememberLastLogin: true integratedWindowsLogin: false dict: signup: footerText: 'By signing up, you agree to our <a href="/terms" target="_new">terms of service</a> and <a href="/privacy" target="_new">privacy policy</a>' } { const lock options = thismainLock lock } { const dark logged = thisprops return logged ? <Auth0WebHeader theme=dark primaryButtonText="Open Dashboard" primaryButtonLink="https://manage.auth0.com/" /> : <Auth0WebHeader theme=dark primaryButtonOnClick=thisshowLock /> }
src/styles/main.styl
@import '../../node_modules/auth0-web-header/build/web-header.css'
Development
Run:
git clone git@github.com:auth0/web-header.gitcd web-headeryarnyarn run start:dev
And point your browser to the playgrounds:
Release
To release a new version just commit a package.json version change. And changelog entry, git tag, cdn deploy and npm publish will be triggered automatically.
Issue Reporting
If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
License
Auth0 Web Header is MIT licensed.