Integrate Civic Auth into your React application with ease, just wrap your app with the Civic Auth provider and add your Client ID (provided after you sign up).
UserButton
The user button
className
or style
property to the UserButton component when declaring it. These styling properties affect both the sign-in button and the user information display when logged in. For further customization, you can also style the buttons that appear in the dropdown menu (which displays when clicking on the user information button) by using the dropdownButtonClassName
or dropdownButtonStyle
properties. This gives you granular control over both the main user button and its associated dropdown menu items. Using a className:
!important
directive i.e. using just the classname in App.css would not work:
style
and className
props, where the value in style
will always take precedence over the same CSS-defined style.
name
as an example here, but you can call any user object property from the user fields schema, as shown below.signIn()
and signOut()
methods from the useUser()
hook to create your own buttons for user log in and log out
Field | Required | Default | Example | Description |
---|---|---|---|---|
clientId | Yes | - | 2cc5633d-2c92-48da-86aa-449634f274b9 | The key obtained on signup to auth.civic.com |
nonce | No | - | 1234 | A single-use ID used during login, binding a login token with a given client. Needed in advanced authentication processes only |
onSignIn | No | - | (error?: Error) => { if (error) { // handle error } else {// handle successful login}} | A hook that executes after a sign-in attempt, whether successful or not. |
onSignOut | No | - | () => { // handle signout } | A hook that executes after a user logs out. |
redirectUrl | No | currentURL | /authenticating | An override for the page that OAuth will redirect to to perform token-exchange. By default Civic will redirect to the current URL and Authentication will be finished by the Civic provider automatically. Only use if you’d like to have some custom display or logic during OAuth token-exchange. The redirect page must have the CivicAuthProvider running in order to finish authentication. |
iframeMode | No | modal | iframeMode={“embedded”} | Set to embedded if you want to embed the login iframe in your app rather than opening the iframe in a modal. See Embedded Login Iframe section below. |
displayMode | No | iFrame | ”iframe” | “redirect” | “new_tab" | "iframe”: Authentication happens in an embedded window within your current page. ”redirect”: Full page navigation to the auth server and back to your site after completion. ”new_tab”: Opens auth flow in a new browser tab, returning to original tab after completion. |
iframe
(default): the UI loads in an iframe that shows in an overlay on top of the existing page content
redirect
: the UI redirects the current URL to a Civic login screen, then redirects back to your site when login is complete
new_tab
: the UI opens in a new tab or popup window (depending on browser preferences), and after login is complete, the tab or popup closes to return the user to your site
useUser
) looks like this:
authStatus
field exposed in the UserContext can be used to update your UI depending on the user’s authentication status, i.e. update the UI to show a loader while the user is in the process of authenticating or signing out.
User
object looks like this:
Field | |
---|---|
id | The user’s unique ID with respect to your app. You can use this to look up the user in the dashboard. |
The user’s email address | |
name | The user’s full name |
given_name | The user’s given name |
family_name | The user’s family name |
updated_at | The time at which the user’s profile was most recently updated. |
Field | |
---|---|
idToken | The OIDC id token, used to request identity information about the user |
accessToken | The OAuth 2.0 access token, allowing a client to make API calls to Civic Auth on behalf of the user. |
refreshToken | The OAuth 2.0 refresh token, allowing a login session to be extended automatically without requiring user interaction. The Civic Auth SDK handles refresh automatically, so you do not need to do this. |
forwardedTokens | If the user authenticated using SSO (single-sign-on login) with a federated OAuth provider such as Google, this contains the OIDC and OAuth 2.0 tokens from that provider. |
CivicAuthIframeContainer
component along with the AuthProvider option iframeMode={"embedded"}
You just need to ensure that the CivicAuthIframeContainer
is a child under a CivicAuthProvider