Skip to content

Instantly share code, notes, and snippets.

@Gdaimon

Gdaimon/index.html

Created September 22, 2021 02:22
Show Gist options
  • Save Gdaimon/c3b635ff35c46a4d50270a12a739bbfc to your computer and use it in GitHub Desktop.
Save Gdaimon/c3b635ff35c46a4d50270a12a739bbfc to your computer and use it in GitHub Desktop.
Download ZIP
Configuración Firebase y Login
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Login Firebase</title>
<!-- Libreria Firebase -->
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
<!-- Productos Firebase a usar -->
<!-- Firestore -->
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
<!-- Firebase Auth -->
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand"
href="#">App</a>
</div>
</nav>
<main class="container mt-3">
<div class="row">
<div class="offset-3 col-6">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="email"
placeholder="[email protected]">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword"
class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password"
class="form-control"
id="password"
placeholder="password">
</div>
</div>
<div class="col-auto">
<button type="submit"
id="btn-login"
class="btn btn-primary mb-3">Enviar</button>
</div>
</div>
</div>
</main>
<script>
// Configuracion Firebase
var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Inicializar Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const googleProvider = new firebase.auth.GoogleAuthProvider();
auth.languageCode = "es";
// Login con un proveedor
async function loginProvider(provider) {
const response = await auth.signInWithPopup(provider)
console.log(response);
}
// loginProvider(googleProvider);
// Crear usuario email y pass
async function createWithEmailAndPassword(email, password) {
try {
const response = await auth.createUserWithEmailAndPassword(email, password);
var user = firebase.auth().currentUser;
console.log(user);
console.log(response.user.email);
} catch (error) {
throw new Error(error)
}
}
createWithEmailAndPassword('[email protected]', '123456')
// Login usuario email y pass
async function signInWithEmailAndPassword(email, password) {
try {
const response = await auth.signInWithEmailAndPassword(email, password);
const user = firebase.auth().currentUser;
console.log(user);
console.log(response.user.email);
actualStatusAuth()
} catch (error) {
throw new Error(error)
}
}
// signInWithEmailAndPassword('[email protected]', '123456')
// Salir
function logOut() {
auth.signOut()
}
function actualStatusAuth() {
auth.onAuthStateChanged(user => {
console.log(user);
});
}
</script>
</body>
</html>
@Gdaimon
Copy link
Author

Gdaimon commented Sep 22, 2021

Configuración

  1. Importamos la librería y los productos a usar:
  <!-- Libreria  Firebase -->
  <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
  <!-- Productos Firebase a usar -->
  <!-- Firestore -->
  <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
  <!-- Firebase Auth -->
  <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
  1. Adicionamos las credenciales:
    var firebaseConfig = {
      apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };
  1. Inicializamos la aplicación y la configuramos:
    // Inicializar Firebase
    firebase.initializeApp(firebaseConfig);
    const auth = firebase.auth();
    auth.languageCode = "es";
  1. Configurar el proveedor de login Google
const googleProvider = new firebase.auth.GoogleAuthProvider();

5a. Implementación login con Google

    // Login con un proveedor
    async function loginProvider(provider) {
      const response = await auth.signInWithPopup(provider)
      console.log(response);
    }

    loginProvider(googleProvider);

5b. Implementación login y creación de usuario con email y password

    //  Crear usuario email y password
    async function createWithEmailAndPassword(email, password) {
      try {
        const response = await auth.createUserWithEmailAndPassword(email, password);
        var user = firebase.auth().currentUser;
        console.log(user);
        console.log(response.user.email);
      } catch (error) {
        throw new Error(error)
      }
    }
    createWithEmailAndPassword('[email protected]', '123456')


    // Login usuario email y password
    async function signInWithEmailAndPassword(email, password) {
      try {
        const response = await auth.signInWithEmailAndPassword(email, password);
        const user = firebase.auth().currentUser;
        console.log(user);
        console.log(response.user.email);
        actualStatusAuth()
      } catch (error) {
        throw new Error(error)
      }
    }
    signInWithEmailAndPassword('[email protected]', '123456')
  1. LogOut
    // Salir
    function logOut() {
      auth.signOut()
    }
  1. Revisar estado actual del usuario
    function actualStatusAuth() {
      auth.onAuthStateChanged(user => {
        console.log(user);
      });
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment