Component Directory

caution

@experimental This functionality is experimental and subject to change.

This document contains a directory of commonly used Globus UI components.

Context

Contexts are used to wrap components that require access to a shared state. For example, the a <globus-auth-context> is used to wrap components that require specific Globus Auth state.

<globus-auth-context>

Build a context for Globus Auth state (e.g. access token) to act as a wrapper for child components.

<globus-auth-context client-id="bb8b1927-8b64-4c68-a025-dd7daca20cbd" redirect-uri="http://localhost:3333" scopes="urn:globus:auth:scope:transfer.api.globus.org:all" />

Properties

Property	Attribute	Description	Type	Default
clientId (required)	client-id	The Client ID of the application.	string	undefined
contextId	context-id	Provide a unique identifier for the authorization context. This can be used by child <gac-authenticated> components to listen for changes to the authentication state of a specific context.	number \| string	'default'
redirectUri (required)	redirect-uri	The URL to redirect to during the authorization code flow. This should be a URL that is registered as a redirect URI for the client.	string	undefined
scopes (required)	scopes	A space-separated list of scopes to request during the authorization code flow.	string	undefined

<gac-authenticated>

In order to consume the parent <globus-auth-context> state, wrap components in <gac-authenticated>.

This component will render its children based on the authenticated state value.

<globus-auth-context client-id="bb8b1927-8b64-4c68-a025-dd7daca20cbd" redirect-uri="http://localhost:3333" scopes="urn:globus:auth:scope:transfer.api.globus.org:all" />

  <gac-authenticated state="false">
    <p>In order to access this resource, you'll need to login in.</p>
    <button id="login">Log In</button>
  </gac-authenticated>

  <gac-authenticated>
    <p>Thanks for visiting!</p>
    <button id="logout">Log Out</button>
  </gac-authenticated>

</globus-auth-context>

Properties

Property	Attribute	Description	Type	Default
contextId	context-id	The context identifier that the state value will be compared to.	number \| string	'default'
state	state	The value of authenticated state compare.	'true' \| 'false'	'true'