I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Supabase Google Authentication Test</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5">
<h1 class="text-center">Supabase Google Authentication</h1>
<div class="text-center py-4">
<button id="login" class="btn btn-primary">Sign in with Google</button>
<button id="logout" class="btn btn-danger d-none">Sign Out</button>
</div>
<div id="user-info" class="text-center mt-4"></div>
</div>
<script type="module">
// Initialize Supabase
console.log("Initializing")
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
const supabaseUrl = "https://MyProject.supabase.co";
const supabaseKey = "MyKeyHere";
const supabase = supabase.createClient(supabaseUrl, supabaseKey);
On that last line I get this error:
SigninTest.html:26 Uncaught ReferenceError: Cannot access 'supabase' before initialization at SigninTest.html:26:29
I also tried it with <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script> rather than the module, but both fail to initialize supabase.
What am I missing here?
