사용자 인증 - 자동 로그인

45. 자동 로그인

로그인을 한 후 계정 정보를 보면 이름도 보입니다. 그러나 새로 사이트에 접속을 하면 이름이 보이지 않습니다.

ChatGPT에게 물었습니다.

1. auth.onAuthStateChanged에서의 user 객체는?

ChatGPT

 

The auth.onAuthStateChanged method in Firebase Authentication is an observer that gets called whenever the user's sign-in state changes. This includes when the user first signs in, signs out, or when the user's ID token is refreshed. The callback function you provide to onAuthStateChanged receives a user object if the user is signed in, or null if no user is signed in.

Firebase 인증의 auth.onAuthStateChanged 메소드는 사용자의 로그인 상태가 변경될 때마다 호출되는 관찰자입니다. 여기에는 사용자가 처음 로그인하거나 로그아웃하는 경우 또는 사용자의 ID 토큰이 새로 고쳐지는 경우가 포함됩니다. 'onAuthStateChanged'에 제공하는 콜백 함수는 사용자가 로그인한 경우 'user' 객체를 수신하고, 로그인한 사용자가 없는 경우 'null' 객체를 수신합니다.

The ‘user’ Object

When a user is signed in, the user object contains several properties that provide information about the user. Here's a brief overview of the common properties you might find in the user object:

사용자가 로그인하면 'user' 개체에는 사용자에 대한 정보를 제공하는 여러 속성이 포함됩니다. 다음은 user 개체에서 찾을 수 있는 공통 속성에 대한 간략한 개요입니다.

• uid: A unique identifier for the user.
  uid: 사용자의 고유 식별자입니다.
• displayName: The user's display name.
  displayName: 사용자의 표시 이름입니다.
• email: The user's email address.
  이메일: 사용자의 이메일 주소입니다.
• emailVerified: A boolean indicating whether the user's email address has been verified.
  emailVerified: 사용자의 이메일 주소가 확인되었는지 여부를 나타내는 부울입니다.
• phoneNumber: The user's phone number.
  phoneNumber: 사용자의 전화번호입니다.
• photoURL: The URL of the user's profile picture.
  photoURL: 사용자 프로필 사진의 URL입니다.
• providerData: An array of objects representing the provider-specific information for the user.
  providerData: 사용자에 대한 공급자별 정보를 나타내는 개체 배열입니다.
• refreshToken: A refresh token for the user.
  refreshToken: 사용자를 위한 새로 고침 토큰입니다.
• metadata: Additional metadata about the user, such as the creation time and last sign-in time.
  메타데이터: 생성 시간, 마지막 로그인 시간 등 사용자에 대한 추가 메타데이터입니다.
• tenantId: The tenant ID for multi-tenancy (if applicable).
  tenantId: 다중 테넌트에 대한 테넌트 ID입니다(해당되는 경우).
• getIdToken(): A method that returns a Promise containing the current user's ID token.
  getIdToken(): 현재 사용자의 ID 토큰이 포함된 Promise를 반환하는 메서드입니다.
• getIdTokenResult(): A method that returns a Promise containing a IdTokenResult object, which includes the user's ID token and additional information.
  getIdTokenResult(): 사용자의 ID 토큰과 추가 정보가 포함된 IdTokenResult 개체가 포함된 Promise를 반환하는 메서드입니다.
• reload(): A method to reload the user data.
  reload(): 사용자 데이터를 다시 로드하는 메소드입니다.
• toJSON(): A method to serialize the user object to JSON.
  toJSON(): 사용자 개체를 JSON으로 직렬화하는 메서드입니다

Example of Using 'auth.onAuthStateChanged'

Here’s an example of how you can use auth.onAuthStateChanged in a Vue component to monitor the authentication state and handle the user object.

다음은 Vue 구성 요소에서 'auth.onAuthStateChanged'를 사용하여 인증 상태를 모니터링하고 사용자 개체를 처리하는 방법에 대한 예입니다.

 

firebase.js

// firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  projectId: 'your-project-id',
  storageBucket: 'your-storage-bucket',
  messagingSenderId: 'your-messaging-sender-id',
  appId: 'your-app-id'
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();
const db = firebase.firestore();

export { auth, db };

 

store.js

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import { auth } from './firebase';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    authReady: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setAuthReady(state, isReady) {
      state.authReady = isReady;
    }
  },
  actions: {
    fetchUser({ commit }) {
      auth.onAuthStateChanged(user => {
        commit('setUser', user);
        commit('setAuthReady', true);
      });
    }
  },
  getters: {
    user: state => state.user,
    authReady: state => state.authReady
  }
});

 

App.vue

// App.vue
<template>
  <div id="app" v-if="authReady">
    <div v-if="user">
      <h1>Welcome, {{ user.displayName || user.email }}</h1>
      <p>UID: {{ user.uid }}</p>
      <p>Email: {{ user.email }}</p>
      <img v-if="user.photoURL" :src="user.photoURL" alt="Profile Picture">
    </div>
    <div v-else>
      <p>No user is signed in.</p>
    </div>
  </div>
  <div v-else>
    <p>Loading...</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['user', 'authReady'])
  },
  created() {
    this.$store.dispatch('fetchUser');
  }
};
</script>

Explanation 설명

1. Firebase Initialization:

• The firebase.js file initializes Firebase and exports the auth and db instances.
  firebase.js 파일은 Firebase를 초기화하고 auth 및 db 인스턴스를 내보냅니다.

2. Vuex Store:

• State: Holds the current user and a flag (authReady) to indicate if authentication state has been checked.
  State: 현재 사용자와 인증 상태가 확인되었는지 나타내는 플래그(authReady)를 보유합니다.
• Mutations: setUser to update the current user and setAuthReady to update the authentication readiness flag.
  Mutations: 'setUser'는 현재 사용자를 업데이트하고 'setAuthReady'는 인증 준비 플래그를 업데이트합니다.
• Actions: fetchUser listens for authentication state changes using auth.onAuthStateChanged and commits the user to the store.
  Actions: fetchUser는 auth.onAuthStateChanged를 사용하여 인증 상태 변경을 수신하고 사용자를 스토어에 커밋합니다.
• Getters: user to access the current user and authReady to check if authentication state is ready.
  Getters: 현재 사용자에 액세스하기 위한 user 및 인증 상태가 준비되었는지 확인하기 위한 authReady.

3. App Component:

• Uses the authReady state to display a loading message until the authentication state is determined.
  'authReady' 상태를 사용하여 인증 상태가 결정될 때까지 로딩 메시지를 표시합니다.
• Displays user information if a user is signed in, otherwise shows a message indicating no user is signed in.
  사용자가 로그인한 경우 사용자 정보를 표시하고, 그렇지 않으면 로그인한 사용자가 없다는 메시지를 표시합니다.
• Dispatches fetchUser action when created to initialize the authentication state check.
  인증 상태 확인을 초기화하기 위해 생성되면 fetchUser 작업을 전달합니다.
• This approach ensures that your application can respond to changes in the user's authentication state and update the UI accordingly.
  이 접근 방식을 사용하면 애플리케이션이 사용자 인증 상태 변경에 응답하고 이에 따라 UI를 업데이트할 수 있습니다.

2. Can I add the fields I want to the user object in auth.onAuthStateChanged?

auth.onAuthStateChanged에서의 user 객체에 내가 원하는 필드를 추가할 수 있는가?

You cannot directly add fields to the user object provided by Firebase in the auth.onAuthStateChanged callback because this object is managed by Firebase. However, you can create a custom user object that includes both the fields from the Firebase user object and any additional fields you want.

'auth.onAuthStateChanged' 콜백에서 Firebase가 제공하는 'user' 객체는 Firebase에서 관리하기 때문에 해당 객체에 필드를 직접 추가할 수 없습니다. 그러나 Firebase 사용자 개체의 필드와 원하는 추가 필드를 모두 포함하는 맞춤 사용자 개체를 만들 수 있습니다.

Here's how you can do this: 이를 수행하는 방법은 다음과 같습니다.

1. Fetch Additional User Data: Store additional user information in Firestore.
   추가 사용자 데이터 가져오기: 추가 사용자 정보를 Firestore에 저장합니다.
2. Combine Data: Combine the Firebase user object with additional data fetched from Firestore.
   데이터 결합: Firebase 사용자 객체를 Firestore에서 가져온 추가 데이터와 결합합니다.
3. Store Combined User Object: Store the combined user object in your Vuex store.
   결합된 사용자 객체 저장: 결합된 사용자 객체를 Vuex 스토어에 저장합니다.

Step-by-Step Implementation

1. Initialize Firebase and Firestore

 

Ensure that Firebase is configured and Firestore is initialized.
Firebase가 구성되어 있고 Firestore가 초기화되었는지 확인하세요.

// firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  projectId: 'your-project-id',
  storageBucket: 'your-storage-bucket',
  messagingSenderId: 'your-messaging-sender-id',
  appId: 'your-app-id'
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();
const db = firebase.firestore();

export { auth, db };

2. Create Vuex Store

Define a Vuex store with state, mutations, actions, and getters to handle users.
사용자를 처리하기 위한 state, mutations, actions 및 getter가 포함된 Vuex store를 정의합니다.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import { auth, db } from './firebase';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    authReady: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setAuthReady(state, isReady) {
      state.authReady = isReady;
    }
  },
  actions: {
    async fetchUser({ commit }) {
      auth.onAuthStateChanged(async (firebaseUser) => {
        if (firebaseUser) {
          try {
            const userDoc = await db.collection('users').doc(firebaseUser.uid).get();
            const userData = userDoc.exists ? userDoc.data() : {};
            const customUser = {
              uid: firebaseUser.uid,
              email: firebaseUser.email,
              displayName: firebaseUser.displayName,
              photoURL: firebaseUser.photoURL,
              ...userData // Add additional fields from Firestore
            };
            commit('setUser', customUser);
          } catch (error) {
            console.error('Error fetching user data:', error);
          }
        } else {
          commit('setUser', null);
        }
        commit('setAuthReady', true);
      });
    }
  },
  getters: {
    user: state => state.user,
    authReady: state => state.authReady
  }
});

3. Access the User Data in a Component

Create a Vue component that reads and displays the custom user object from the Vuex store.
Vuex store에서 사용자 정의 사용자 객체를 읽고 표시하는 Vue component를 만듭니다.

// UserProfile.vue
<template>
  <div v-if="authReady">
    <div v-if="user">
      <h1>Welcome, {{ user.displayName || user.email }}</h1>
      <p>UID: {{ user.uid }}</p>
      <p>Email: {{ user.email }}</p>
      <p>Custom Field: {{ user.customField }}</p> <!-- Custom field example -->
      <img v-if="user.photoURL" :src="user.photoURL" alt="Profile Picture">
    </div>
    <div v-else>
      <p>No user is signed in.</p>
    </div>
  </div>
  <div v-else>
    <p>Loading...</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['user', 'authReady'])
  },
  created() {
    this.$store.dispatch('fetchUser');
  }
};
</script>

Explanation 설명

1. Firebase Initialization:

• The firebase.js file initializes Firebase and exports the auth and db instances.
  firebase.js 파일은 Firebase를 초기화하고 auth 및 db 인스턴스를 내보냅니다.

2. Vuex Store:

• State: Holds the custom user object and a flag (authReady) to indicate if the authentication state has been checked.
  State: 사용자 정의 사용자 개체와 인증 상태가 확인되었는지 나타내는 플래그(authReady)를 보유합니다.

• Mutations: setUser to update the custom user object, setAuthReady to update the authentication readiness flag.
  Mutations: 사용자 정의 사용자 개체를 업데이트하는 setUser, 인증 준비 플래그를 업데이트하는 setAuthReady.

• Actions:
  • fetchUser listens for authentication state changes using auth.onAuthStateChanged.
    fetchUser는 auth.onAuthStateChanged를 사용하여 인증 상태 변경을 수신합니다.
  • If a user is signed in, it fetches additional user data from Firestore, combines it with the Firebase user object, and commits the combined object to the store.
    사용자가 로그인하면 Firestore에서 추가 사용자 데이터를 가져와서 Firebase 사용자 개체와 결합한 후 결합된 개체를 저장소에 커밋합니다.
• Getters: user to access the custom user object and authReady to check if authentication state is ready.
  Getters: 사용자 정의 사용자 객체에 액세스하기 위한 user 및 인증 상태가 준비되었는지 확인하기 위한 authReady.

3. UserProfile Component:

• Uses the authReady state to display a loading message until the authentication state is determined.
  'authReady' 상태를 사용하여 인증 상태가 결정될 때까지 로딩 메시지를 표시합니다.
• Displays user information, including custom fields, if a user is signed in. Otherwise, it shows a message indicating no user is signed in.
  사용자가 로그인한 경우 사용자 정의 필드를 포함한 사용자 정보를 표시합니다. 그렇지 않으면 로그인한 사용자가 없다는 메시지가 표시됩니다.
• Dispatches fetchUser action when created to initialize the authentication state check.
  인증 상태 확인을 초기화하기 위해 생성되면 fetchUser 작업을 전달합니다.

This approach allows you to combine the Firebase user object with additional custom fields from Firestore, creating a comprehensive user profile that you can manage and display in your application.

이 접근 방식을 사용하면 Firebase 사용자 개체를 Firestore의 추가 맞춤 필드와 결합하여 애플리케이션에서 관리하고 표시할 수 있는 포괄적인 사용자 프로필을 만들 수 있습니다.

자동 로그인

1. main.js 수정전

2. main.js 수정 후

 

사이트에 다시 접속을 해 보면 계정 정보가 정상적으로 나타나는 것을 볼 수 있습니다.

3. Source Code

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import { auth } from '@/firebase';

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  created() {
    // Set up Firebase auth state change listener
    const { dispatch } = this.$store;

    dispatch('fetchUsers');
    auth.onAuthStateChanged(user => {
      // 우리는 우리의 웹앱에 저장된 계정 정보를 사용한다.
      // user.uid로 웹앱의 firestore DB에서 계정 정보를 가져온다. 
      console.log('main', user.uid);
      dispatch('fetchUserWithUid', {uid: user.uid});

      //dispatch('setUser', user);
      // if (user) {
      //   dispatch('fetchUsers');
      // }
    });
  }
}).$mount('#app')

src/store/index.js

// src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import { db, auth, googleProvider } from '@/firebase';
import router from '@/router';  // Vue Router import

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    users: [],
    isLoading: false,
    error: null
  },
  mutations: {
    setUser(state, user) {
      console.log("setuser:", user);
      state.user = user;
    },
    setUsers(state, users) {
      state.users = users;
      state.isLoading = false;
    },
    setError(state, error) {
      state.error = error;
      state.isLoading = false;
    },
    setLoading(state, isLoading) {
      state.isLoading = isLoading;
    }
  },
  actions: {
    async fetchUsers({ commit }) {
      commit('setLoading', true);
      try {
        const usersSnapshot = await db.collection('users').get();
        const users = usersSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        //const user1 = users[0];
        //console.log(user1.user.name);
        //console.log(user1.user.email);
        commit('setUsers', users);
      } catch (error) {
        commit('setError', error.message);
      }
    },
    async addUser({ dispatch }, user) {
      try {
        await db.collection('users').add(user);
        dispatch('fetchUsers');
      } catch (error) {
        console.error('Error adding user:', error);
      }
    },
    async deleteUser({ dispatch }, userId) {
      try {
        await db.collection('users').doc(userId).delete();
        dispatch('fetchUsers');
      } catch (error) {
        console.error('Error deleting user:', error);
      }
    },
    async updateUser({ dispatch }, { userId, user }) {
      try {
        await db.collection('users').doc(userId).update(user);
        dispatch('fetchUsers');
      } catch (error) {
        console.error('Error updating user:', error);
      }
    },
    async login({ commit, dispatch }, { email, password }) {
      try {
        const { user } = await auth.signInWithEmailAndPassword(email, password);;
        // 웹앱의 계정 정보를 가져와 로그인 설정을 한다.
        dispatch('fetchUserWithUid', {uid: user.uid});       
        router.push("/");   // home으로
      } catch (error) {
        commit('setError', error.message);
      }
    },
    async fetchUserWithUid({ commit }, {uid}) {
      console.log(uid);
      try {
        const querySnapshot = await db.collection('users').where('uids', 'array-contains', uid).get();
        const user = querySnapshot.docs.map(doc => doc.data());
        //console.log('Matching user:', user[0]);
        // 로그인 설정을 한다.
        commit('setUser', user[0]);
      } catch (error) {
        console.error('Error fetching user:', error);
      }            
    },    
    // async login({ commit, getters }, { email, password }) {
    //   try {
    //     const { user } = await auth.signInWithEmailAndPassword(email, password);

    //     try {
    //       const myUser = getters.getUserByUid(user.uid);
    //       console.log(myUser);
    //       if (!myUser) {
    //         commit('setUser', myUser);
    //         console.log(myUser);
    //         router.push("/");   // home으로
    //       } else {
    //         console.log('User already exists');
    //       }
    //     } catch (error) {
    //       console.error('Error adding user:', error);
    //     }

    //   } catch (error) {
    //     commit('setError', error.message);
    //   }
    // },

    async register({ commit, dispatch }, { email, password, name }) {
      try {
        const { user } = await auth.createUserWithEmailAndPassword(email, password, name);

        // 웹앱에 계정을 만든다.
        const newUser = {
          email: email,
          name: name,
          uids: [user.uid]
        };
        // newUser 객체가 추가됨
        // dispatch('addUser', { user: newUser });
        // newUser 계정 정보가 추가됨
        dispatch('addUser', newUser);
        // 로그인 설정
        commit('setUser', newUser);
        router.push("/");   // home으로        
      } catch (error) {
        console.log(error);
        commit('setError', error.message);
      }
    },
    async googleLogin({ commit, getters }) {
      try {
        const { user } = await auth.signInWithPopup(googleProvider);
        try {
          const myUser = getters.getUserByUid(user.uid);
          if (!myUser) {
            commit('setUser', myUser);
            console.log(myUser);
            router.push("/");   // home으로
          } else {
            console.log('User already exists');
          }
        } catch (error) {
          console.error('Error adding user:', error);
        }
      } catch (error) {
        commit('setError', error.message);
      }
    },
    async logout({ commit }) {
      await auth.signOut();
      commit('setUser', null);
    },
    setUser({ commit }, user) {
      commit('setUser', user);
    }
  },
  getters: {
    user: state => state.user,
    users: state => state.users,
    isLoading: state => state.isLoading,
    error: state => state.error,
    getUserByUid: (state) => (uid) => {
      return state.users.find(user => user.uids && user.uids.includes(uid));
    }
  }
});