Getting Started
Javascript

Getting Started
Remix

Getting Started
Javascript

Getting Started with JavaScript

To integrate the JavaScript SDK into your application, you can choose one of two methods:

Install the package using a package manager like npm.
Load the OllioJS package directly from the CDN using a <script> tag.

Use the tabs below to select your preferred approach.

To integrate the JavaScript SDK into your application, you can choose one of two methods:

Install the package using a package manager like npm.
Load the OllioJS package directly from the CDN using a <script> tag.

Use the tabs below to select your preferred approach.

NPM Module
<script>

Set up a JavaScript app using Vite

To integrate Ollio's JavaScript SDK, you'll need a bundler such as Vite or Webpack.

For this guide, follow these steps to create a JavaScript app using Vite:

Run the specified commands in your terminal.
During the setup process, select the Vanilla framework and the JavaScript variant when prompted.

For more information, refer to the Vite documentation.

npm

yarn

pnpm

terminal

npm create vite@latest ollio-javascript
cd ollio-javascript
npm install
npm run dev

Install @ollio/ollio-js

Run the following command to add the JavaScript SDK to your project:

npm

yarn

pnpm

terminal

npm install @ollio/ollio-js

Set your Ollio API keys

It's recommended to store your Ollio Publishable Key using environment variables. In JavaScript projects, you can add these values to an .env file and load them into your app using a package like dotenv. For Vite projects, environment variables defined in an .env file at the project root are automatically accessible via the import.meta.env object.

In the Ollio Dashboard, navigate to the API keys page.
In the Quick Copy section, copy your Ollio Publishable Key.
Paste your key into your .env file.

The final result should look like this:

.env

VITE_OLLIO_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY

In your main.js file, import the Publishable Key using Vite's import.meta.env object:

main.js

const ollioPubKey = import.meta.env.VITE_OLLIO_PUBLISHABLE_KEY

Initialize Ollio

To initialize Ollio, import the Ollio class and instantiate it with your Ollio Publishable Key. Then, call the load() method, as shown in the following example:

main.js

import { Ollio } from '@ollio/ollio-js'

const publishableKey = import.meta.env.VITE_OLLIO_PUBLISHABLE_KEY

const ollio = new Ollio(publishableKey)
await ollio.load({
  // Set load options here
})

Note

Calling the load() method initializes Ollio. For more details on the load() method and the available options, refer to the reference documentation.

Add Ollio components to your app

Ollio's prebuilt components are an easy way to integrate authentication and user management into your app. These components are styled by default and customizable to fit your app's design.

To get started, add the following components:

<SignIn />: Renders a user interface for signing in.
<UserButton />: Displays the signed-in user's avatar. Clicking it opens a dropdown menu with account management options.

Your main.js file should look like this:

main.js

import { Ollio } from '@ollio/ollio-js'

const ollioPubKey = import.meta.env.VITE_OLLIO_PUBLISHABLE_KEY

const ollio = new Ollio(ollioPubKey)
await ollio.load()

if (ollio.user) {
  document.getElementById('app').innerHTML = `
    <div id="user-button"></div>
  `

  const userButtonDiv = document.getElementById('user-button')

  ollio.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
    <div id="sign-in"></div>
  `

  const signInDiv = document.getElementById('sign-in')

  ollio.mountSignIn(signInDiv)
}

And your index.html file should look something like this:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Create your first user

Run your project with the following command:

npm

yarn

pnpm

terminal

npm run dev

Now visit your app's homepage at http://localhost:5173. Sign up to create your first user.

NPM Module
<script>

Set up a JavaScript app using Vite

To integrate Ollio's JavaScript SDK, you'll need a bundler such as Vite or Webpack.

For this guide, follow these steps to create a JavaScript app using Vite:

Run the specified commands in your terminal.
During the setup process, select the Vanilla framework and the JavaScript variant when prompted.

For more information, refer to the Vite documentation.

npm

yarn

pnpm

terminal

npm create vite@latest ollio-javascript
cd ollio-javascript
npm install
npm run dev

Install @ollio/ollio-js

Run the following command to add the JavaScript SDK to your project:

npm

yarn

pnpm

terminal

npm install @ollio/ollio-js

Set your Ollio API keys

In the Ollio Dashboard, navigate to the API keys page.
In the Quick Copy section, copy your Ollio Publishable Key.
Paste your key into your .env file.

The final result should look like this:

.env

VITE_OLLIO_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY

In your main.js file, import the Publishable Key using Vite's import.meta.env object:

main.js

const ollioPubKey = import.meta.env.VITE_OLLIO_PUBLISHABLE_KEY

Initialize Ollio

To initialize Ollio, import the Ollio class and instantiate it with your Ollio Publishable Key. Then, call the load() method, as shown in the following example:

main.js

import { Ollio } from '@ollio/ollio-js'

const publishableKey = import.meta.env.VITE_OLLIO_PUBLISHABLE_KEY

const ollio = new Ollio(publishableKey)
await ollio.load({
  // Set load options here
})

Note

Calling the load() method initializes Ollio. For more details on the load() method and the available options, refer to the reference documentation.

Add Ollio components to your app

Ollio's prebuilt components are an easy way to integrate authentication and user management into your app. These components are styled by default and customizable to fit your app's design.

To get started, add the following components:

<SignIn />: Renders a user interface for signing in.
<UserButton />: Displays the signed-in user's avatar. Clicking it opens a dropdown menu with account management options.

Your main.js file should look like this:

main.js

import { Ollio } from '@ollio/ollio-js'

const ollioPubKey = import.meta.env.VITE_OLLIO_PUBLISHABLE_KEY

const ollio = new Ollio(ollioPubKey)
await ollio.load()

if (ollio.user) {
  document.getElementById('app').innerHTML = `
    <div id="user-button"></div>
  `

  const userButtonDiv = document.getElementById('user-button')

  ollio.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
    <div id="sign-in"></div>
  `

  const signInDiv = document.getElementById('sign-in')

  ollio.mountSignIn(signInDiv)
}

And your index.html file should look something like this:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Create your first user

Run your project with the following command:

npm

yarn

pnpm

terminal

npm run dev

Now visit your app's homepage at http://localhost:5173. Sign up to create your first user.

What did you think of this content?

It was helpful

It was not helpful

I have feedback

What did you think of this content?

Helpful

Not helpful

Feedback

Getting Started with Remix

iOS Quickstart (Beta)

Getting Started with Remix

iOS Quickstart (Beta)

Last updated on

Dec

2024

Last updated on

Dec

2024