# Local Supabase Auth Setup

![Local Supabase Auth Setup](https://cdn.hashnode.com/res/hashnode/imageupload/v1678383519156/7ea881cc-352b-46fb-9b2b-35b0be5a5abe.png)

library\_books Local Supabase Auth Setup
----------------------------------------

###### _5 min read_

[](https://code.build/u/86qJ3nXSvhBPUbmdaMwUeb/jdgamble555)

There doesn't seem to be a lot of clear info online for setting up Authentication on localhost, so I thought I would write one. I'm currently trying to develop my next project local-first, which is good practice. Here are few things I'm learning along the way.

ENV Files
---------

Add your Client ID and Secret to your `.env` file, as you don't want the info readily available on GitHub.

    GOOGLE_CLIENT_ID=...
    GOOGLE_CLIENT_SECRET=...

TOML File
---------

Edit your **config.toml** file to add your auth inside `env()` functions like so:

    [auth.external.google]
    enabled = true
    client_id = "env(GOOGLE_CLIENT_ID)"
    secret = "env(GOOGLE_CLIENT_SECRET)"
    # Overrides the default auth redirectUrl.
    redirect_uri = "http://localhost:54321/auth/v1/callback"
    # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
    # or any other third-party OIDC providers.
    url = ""

Package.json
------------

Add a stop and start command like `sb:start` and `sb:stop` to your package.json for easy use.

    "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "test": "playwright test",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "sb:stop": "npx env-cmd npx supabase stop",
     "sb:start": "npx env-cmd npx supabase start"
    },

If you use a Linux system or Mac, you should be able to use something like:

    source ./.env && npx supabase start

This depends on where your `.env` file is located.

However, if you use Windows, you will need to install `env-cmd` first:

    npm i -D env-cmd

then use this command instead:

    npx env-cmd npx supabase start

You will need load the `.env` file for both stop and start. Now you can use:

    npm run sb:stop
    npm run sb:start

Callback
--------

Make sure to use:

    http://localhost:54321/auth/v1/callback

as your callback URL. This doesn't seem to be clear anywhere. For Google, i.e., you need to add this to your "Authorized redirect URIs" after you follow the [Google Setup](https://supabase.com/docs/guides/auth/social-login/auth-google).

Now you can Login with Google using only a Localhost setup.

J

  

* * *
